视频直播源码，平台购物车的交互场景

shouye.wxml:

<view class="title">案例：</view><br><view class="goods-box"><br>  <!-- 商品展示 --><br>  <view class="q1"><br>    <image src="../../images/qqq.jpg"></image><br>  </view><br>  <view class="carts-cion"><br>    <view class="q2"><br>                <!-- 购物车图标 --><br>          <van-icon name="shopping-cart-o"size="30px" /><br>          <!-- 加入购物车导航 --><br>          <view class="operation"><br>            <text class="operation-jian" bindtap="jianCount">-</text><br>            <text class="operation-num">数量{{num}}</text><br>            <text class="operation-jia" bindtap="jiaCount">+</text><br>            <text bindtap="addCart">加入购物车</text><br>          </view><br>    </view><br>    <!-- 加入购物车 --><br>    <text class="carts-num" wx:if="{{hasCart}}">购物车已有：{{totalNum}}</text><br>  </view><br></view>

shouye.wxss:

.q1{<br>  display: flex;<br>  flex-direction: row;<br>  justify-content: space-around;<br>}<br>image{<br>  width: 500rpx;<br>  height: 350rpx;<br>  border-radius: 30rpx;<br>}<br>.q2{<br>  border-radius: 30rpx;<br>  height: 100rpx;<br>  <br>  margin: 30rpx 20% 0 20%;<br>  display: flex;<br>  flex-direction: row;<br>  justify-content: space-around;<br>}

shouye.js:

// pages/shouye/shouye.js<br>Page({<br> <br>  /**<br>   * 页面的初始数据<br>   */<br>  data: {<br>    num:1,<br>    totalNum:0,<br>    hasCart:false,<br>  },<br>  jiaCount:function(){<br>    var num = this.data.num;<br>    num++;<br>    this.setData({<br>      num:num<br>    })<br>  },<br>  jianCount:function(){<br>    var num = this.data.num;<br>    num--;<br>    this.setData({<br>      num:num<br>    })<br>  },<br>  addCart:function(){<br>    const num = this.data.num;<br>    var total = this.data.totalNum;<br>    this.setData({<br>      hasCart:true,<br>      totalNum:num + total<br>    })<br>    wx.showToast({<br>      title:"加入购物车成功！",<br>      duration:3000,<br>    })<br>  },<br> <br>  /**<br>   * 生命周期函数--监听页面加载<br>   */<br>  onLoad(options) {<br> <br>  },<br> <br>  /**<br>   * 生命周期函数--监听页面初次渲染完成<br>   */<br>  onReady() {<br> <br>  },<br> <br>  /**<br>   * 生命周期函数--监听页面显示<br>   */<br>  onShow() {<br> <br>  },<br> <br>  /**<br>   * 生命周期函数--监听页面隐藏<br>   */<br>  onHide() {<br> <br>  },<br> <br>  /**<br>   * 生命周期函数--监听页面卸载<br>   */<br>  onUnload() {<br> <br>  },<br> <br>  /**<br>   * 页面相关事件处理函数--监听用户下拉动作<br>   */<br>  onPullDownRefresh() {<br> <br>  },<br> <br>  /**<br>   * 页面上拉触底事件的处理函数<br>   */<br>  onReachBottom() {<br> <br>  },<br> <br>  /**<br>   * 用户点击右上角分享<br>   */<br>  onShareAppMessage() {<br> <br>  }<br>})

代码讲解：

shouye.wxml文件中"+"和"-"和"加入购物车"三个按钮绑定了点击事件。在shouye.js文件中为"+"按钮定义了事件函数jiaCount（），用于实现当用户点击"+"按钮时商品数量加1.为"-"按钮定义了事件函数jianCount（）用于实现当用户点击"-"按钮时商品数量减1.为"加入购物车"按钮定义了事件函数addCart（），用于实现当用户点击"加入购物车"时，一次性向购物车添加num件商品。当用户由加购物车行为，及点击了"加入购物车"按钮时，hasCart被赋值为true，则在购物车图标下方出现"购物车已有{{数量}}"

以上就是视频直播源码，平台购物车的交互场景，更多内容欢迎关注之后的文章