Vant+小程序+购物车实例
图片实例，看是否是您所需要的喔。。。。
扫码小程序可看实例操作，有啥问题也可扫码加群，很希望可以帮助到你喔！
HTML部分：
<view class="cart"> <view class='top' wx:if="{{isTop}}"> <view> <van-icon name="delete" class='delete' bindtap="emptyCart"/><text bindtap="emptyCart">清空购物车</text> </view> </view> <view> <view class="cartGoods" wx:for="{{items}}" wx:key="item" data-index="{{index}}"> <view class="sigleCheck"> <!-- wx:if 是否选择显示不同图标 --> <icon wx:if="{{item.selected}}" type="success" color="#6167e9" bindtap="sigleCheck" data-index="{{index}}" /> <icon wx:else type="circle" bindtap="sigleCheck" data-index="{{index}}"/> </view> <view class="goodsImg"> <navigator url="../details/details?id={{item.id}}"> <image src="{{item.pic}}" /> </navigator> </view> <view class="goodsDetail"> <view class='details'> <view class='goodsName'> <navigator url="../details/details?id={{item.id}}"> {{item.info}}</navigator> </view> <text class='goodsPrice'>￥{{item.sale_price}}</text> </view> <view class="operate"> <van-stepper value="{{item.number}}" data-index="{{index}}" min="1" max="10" bind:plus="plus" bind:minus="minus"/> <view class="del"> <van-icon name="close" bindtap="deleteList" data-index="{{index}}"/> </view> </view> </view> </view> <view class="submitBar" wx:if="{{bottomBar}}"> <van-submit-bar price="{{ totalPrice*100 }}" button-text="买单" bind:submit="onClickButton" > <!-- wx:if 是否全选显示不同图标 --> <view class='allCheck'> <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#6167e9" bindtap="selectAll"/> <icon wx:else type="circle" color="#6167e9" bindtap="selectAll"/> <text class="allText">全选</text> </view> </van-submit-bar> </view> </view> <view wx:if="{{hasList}}" class='empty'> <view> <image src='../../images/a.png' class='empty_pic'></image> <view class="empty_text">购物车为空，快去添加商品吧~</view> <view> <van-button round type="danger" bindtap='Gohome' class='Gohome' size="large">去逛逛</van-button> </view> </view> </view> <van-notify id="custom-selector" /> <van-toast id="van-toast" /> </view>
JS部分：
1 //index.js 2 import Notify from '../vant/notify/notify'; 3 import Toast from '../vant/toast/toast'; //引入toast 4 var cartData = require('../../api/cart.js'); 5 6 //获取应用实例 7 const app = getApp() 8 9 Page({ 10 data: { 11 isTop: true, 12 bottomBar:true, //默认底部导航 13 hasList: false, // 列表是否有数据 14 selectAllStatus: false, // 全选状态，默认全选 15 totalPrice:0, //总价 16 }, 17 onLoad: function () { 18 this.setData({ 19 items: cartData.cartList 20 }); 21 }, 22 // 减去商品 23 minus(event){ 24 var items = this.data.items //获取购物车列表 25 var index = event.currentTarget.dataset.index;//获取当前点击事件的下标索引 26 var number = items[index].number //获取购物车里面的value值 27 number-- 28 items[index].number=number; 29 console.log("number",number); 30 this.setData({ 31 items: items 32 }); 33 this.getTotalPrice(); // 重新获取总价 34 }, 35 // 加 36 plus(e){ 37 var items = this.data.items //获取购物车列表 38 var index = e.currentTarget.dataset.index;//获取当前点击事件的下标索引 39 var number = items[index].number //获取购物车里面的value值 40 number++ 41 items[index].number = number; 42 this.setData({ 43 items: items 44 }); 45 this.getTotalPrice(); // 重新获取总价 46 }, 47 // 单选 48 sigleCheck(e){ 49 var items = this.data.items //获取购物车列表 50 var index = e.currentTarget.dataset.index;//获取当前点击事件的下标索引 51 var selected = items[index].selected //获取购物车里面的value值 52 items[index].selected = !selected; 53 this.setData({ 54 items:items 55 }); 56 this.getTotalPrice(); // 重新获取总价 57 }, 58 // 全选 59 selectAll(e) { 60 let selectAllStatus = this.data.selectAllStatus; // 是否全选状态 61 selectAllStatus = !selectAllStatus; 62 let items = this.data.items; 63 64 for (let i = 0; i < items.length; i++) { 65 items[i].selected = selectAllStatus; // 改变所有商品状态 66 } 67 this.setData({ 68 selectAllStatus: selectAllStatus, 69 items: items 70 }); 71 this.getTotalPrice(); // 重新获取总价 72 }, 73 // 总价 74 getTotalPrice() { 75 let items = this.data.items; // 获取购物车列表 76 let total = 0; 77 for (let i = 0; i < items.length; i++) { // 循环列表得到每个数据 78 if (items[i].selected) { // 判断选中才会计算价格 79 total+= items[i].number * items[i].sale_price; // 所有价格加起来 80 total=total 81 } 82 } 83 84 this.setData({ // 最后赋值到data中渲染到页面 85 items: items, 86 totalPrice: total 87 }); 88 console.log(this.data.totalPrice) 89 }, 90 // 删除商品 91 deleteList(e) { 92 const index = e.currentTarget.dataset.index; 93 let items = this.data.items; 94 items.splice(index, 1); // 删除购物车列表里这个商品 95 this.setData({ 96 items: items 97 }); 98 if (!items.length) { // 如果购物车为空 99 Notify({ 100 text: '全部删除', 101 duration: 1000, 102 selector: '#custom-selector', 103 backgroundColor: '#fc464a' 104 }); 105 this.setData({ 106 hasList: true, // 修改标识为false，显示购物车为空页面 107 bottomBar: false, //底部导航隐藏 108 isTop: false, 109 }); 110 } else { // 如果不为空 111 this.getTotalPrice(); // 重新计算总价格 112 Notify({ 113 text: '删除一个', 114 duration: 1000, 115 selector: '#custom-selector', 116 backgroundColor: '#fc464a' 117 }); 118 } 119 }, 120 // 清空购物车 121 emptyCart(){ 122 console.log("清空",this.data.items) 123 var items = this.data.items; 124 items = ''; 125 this.setData({ 126 items: items, 127 bottomBar: false, 128 hasList: true, 129 isTop: false, 130 }); 131 }, 132 // 购买成功 133 onClickButton() { 134 Toast.success('购买成功'); 135 }, 136 Gohome(){ 137 wx.switchTab({ 138 url: '../home/home' 139 }) 140 } 141 })
CSS部分：
.cart{
background: #f7f7f7;
}
.top{
color: #666;
background: #fff;
padding: 20rpx 20rpx;
font-size: 32rpx;
display: flex;
justify-content: space-between;
}
.top .wap-nav{
vertical-align: middle;
padding-right:16rpx;
}
.delete{
padding-right:16rpx;
margin-left: 20rpx;
}
.compute,.cartGoods{
display: flex;
align-items: center;
}
.cartGoods{
justify-content: space-between;
}
.cartGoods{
background: #fff;
margin-top: 20rpx;
padding: 10px 0;
}
.goodsImg image{
width: 160rpx;
height: 160rpx
}
.goodsDetail{
margin:0 30rpx;
}
.goodsName{
color: #666;
font-size: 28rpx;
width: 80%;
}
.details{
height: 46rpx;
overflow: hidden;
display: flex;
}
.goodsPrice{
font-size: 30rpx;
color: red;
font-weight: bold;
display: inline-block;
width: 200rpx;
}
.operate{
display: flex;
margin-top:30rpx;
justify-content: space-around;
}
.sigleCheck{
margin: 0 20rpx;
}
.allCheck{
margin-left: 20rpx;
}
.allCheck icon{
vertical-align: middle;
padding-right:10rpx;
}
.empty{
background: #fff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #666;
font-size: 32rpx;
}
.empty_text{
padding: 10rpx 0 30rpx 0;
text-align: center;
}
.empty_pic{
width:400rpx;
height:250rpx;
}
.Gohome .van-button--large{
height: 80rpx;
background: #6167e9;
border: 1px solid #6167e9;
line-height: 74rpx;
font-size: 36rpx;
}
.submitBar .van-button--danger{
border: 1px solid #6167e9;
background: #6167e9;
}
