视频直播源码，平台购物车的交互场景
shouye.wxml:
<view class="title">案例：</view>
<view class="goods-box">
<!-- 商品展示 -->
<view class="q1">
<image src="../../images/qqq.jpg"></image>
</view>
<view class="carts-cion">
<view class="q2">
<!-- 购物车图标 -->
<van-icon name="shopping-cart-o"size="30px" />
<!-- 加入购物车导航 -->
<view class="operation">
<text class="operation-jian" bindtap="jianCount">-</text>
<text class="operation-num">数量{{num}}</text>
<text class="operation-jia" bindtap="jiaCount">+</text>
<text bindtap="addCart">加入购物车</text>
</view>
</view>
<!-- 加入购物车 -->
<text class="carts-num" wx:if="{{hasCart}}">购物车已有：{{totalNum}}</text>
</view>
</view>
shouye.wxss:
.q1{
display: flex;
flex-direction: row;
justify-content: space-around;
}
image{
width: 500rpx;
height: 350rpx;
border-radius: 30rpx;
}
.q2{
border-radius: 30rpx;
height: 100rpx;
margin: 30rpx 20% 0 20%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
shouye.js:
// pages/shouye/shouye.js
Page({
/**
* 页面的初始数据
*/
data: {
num:1,
totalNum:0,
hasCart:false,
},
jiaCount:function(){
var num = this.data.num;
num++;
this.setData({
num:num
})
},
jianCount:function(){
var num = this.data.num;
num--;
this.setData({
num:num
})
},
addCart:function(){
const num = this.data.num;
var total = this.data.totalNum;
this.setData({
hasCart:true,
totalNum:num + total
})
wx.showToast({
title:"加入购物车成功！",
duration:3000,
})
},
/**
* 生命周期函数--监听页面加载
*/
onl oad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
代码讲解：
shouye.wxml文件中"+"和"-"和"加入购物车"三个按钮绑定了点击事件。在shouye.js文件中为"+"按钮定义了事件函数jiaCount（），用于实现当用户点击"+"按钮时商品数量加1.为"-"按钮定义了事件函数jianCount（）用于实现当用户点击"-"按钮时商品数量减1.为"加入购物车"按钮定义了事件函数addCart（），用于实现当用户点击"加入购物车"时，一次性向购物车添加num件商品。当用户由加购物车行为，及点击了"加入购物车"按钮时，hasCart被赋值为true，则在购物车图标下方出现"购物车已有{{数量}}"
以上就是视频直播源码，平台购物车的交互场景， 更多内容欢迎关注之后的文章
标签：num,--,shouye,购物车,直播,按钮,源码,页面 From： https://www.cnblogs.com/yunbaomengnan/p/16865767.html