微信小程序——购物车单选，全选，删除，结算功能

效果图

如下，我们要实现购物车的单选，全选，删除，结算功能： 

 

代码

 index.wxml

<view class="shop-item" wx:for="{{goodsList}}" wx:key="index"> <view data-id="{{item.id}}" bindtap="select"> <image src="{{item.checked?'../../assets/images/icons/checkall.png':'../../assets/images/icons/check.png'}}" class="check"></image> <!-- <checkbox value="{{item.name}}" checked="{{item.checked}}"/> --> </view> <view class="shop-text"> <view>{{item.name}}</view> <view class="desc">{{item.guige}}</view> <view class="price">{{item.price}}</view> <!-- 数字加减 --> <view class="count"> <view class="count-minus" data-id="{{item.id}}" bindtap="minusCount">-</view> <view>{{item.count}}</view> <view class="count-add" data-id="{{item.id}}" bindtap="addCount">+</view> <view class="btn-del" data-id="{{index}}" bindtap="delListItem">X</view> </view> </view> </view> <view class="shop-footer"> <view class="selectall" bindtap="selectAll"> <image src="{{isSelectAll?'../../assets/images/icons/checkall.png':'../../assets/images/icons/check.png'}}" class="check"></image>全选 </view> <view class="allPrice">￥{{tatalPrice}}</view> <view class="footer-btn" bindtap="Settlement">结算</view> </view>

这里的勾选图标我是用本地图片的，有其它方法可自行修改。 

index.js

function getAttr(e, key) { return e.currentTarget.dataset[key] } Page({ // 数字加减 minusCount(e) { let id = getAttr(e, 'id') let goods = this.data.goodsList.find(item => { return item.id === id }) if (goods.count === 1) return goods.count-- this.setData({ goodsList: this.data.goodsList, }) this.Settlement(); }, addCount(e) { let id = getAttr(e, 'id') let goods = this.data.goodsList.find(item => { return item.id === id }) goods.count++ this.setData({ goodsList: this.data.goodsList, }) this.Settlement(); }, //单选 select(e) { // let id =e.currentTarget.dataset.id let id = getAttr(e, 'id') let goods = this.data.goodsList.find(item => { return item.id === id }) goods.checked = !goods.checked; let isSelectAll = this.data.goodsList.every(r => r.checked) this.setData({ goodsList: this.data.goodsList, isSelectAll }) this.Settlement(); }, // 全选 selectAll() { this.data.isSelectAll = !this.data.isSelectAll this.data.goodsList.forEach(element => { return element.checked = this.data.isSelectAll }); this.setData({ goodsList: this.data.goodsList, isSelectAll: this.data.isSelectAll }) this.Settlement(); }, // 结算 Settlement() { let tatalPrice = 0; this.data.goodsList.forEach(r => { if (r.checked) { tatalPrice += r.count * r.price } }) // console.log(tatalPrice) this.setData({ tatalPrice }) }, //删除 delListItem(e){ let id=getAttr(e,'id') this.data.goodsList.splice(id,1); this.setData({ goodsList:this.data.goodsList }) }, /** * 页面的初始数据 */ data: { isSelectAll: false, tatalPrice: 0, goodsList: [{ id: 1, name: "手机", price: 4800, guige: "国产", count: 1, checked: false }, { id: 2, name: "香水", price: 480, guige: "进口", count: 1, checked: false }, { id: 3, name: "零食", price: 180, guige: "国产", count: 1, checked: false }, { id: 4, name: "电器", price: 1200, guige: "国产", count: 1, checked: false } ], }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.Settlement(); } })

 index.wxss

.shop-item { display: flex; border-bottom: 2rpx dashed #eee; padding: 20rpx; } .shop-text { width: 81%; position: relative; left: 17rpx; } .check{ width: 40rpx; height: 40rpx; } .desc { font-size: 26rpx; color: #999; } .price { color: rgb(252, 50, 50); } .btn-del{ border: 2rpx solid #ccc; width: 40rpx; height: 40rpx; text-align: center; line-height: 40rpx; margin-left: 40rpx; color: rgb(252, 50, 50); } /* 数字加减 */ .count { display: flex; position: absolute; right: 10rpx; top: 20rpx; } .count view { width: 40rpx; height: 40rpx; line-height: 40rpx; text-align: center; } .count-minus { border: 2rpx solid skyblue; background: #fff; color: skyblue; } .count-add { background: skyblue; border: 2rpx solid skyblue; color: #fff; } .shop-footer { position: fixed; bottom: 0; width: 100vw; height: 90rpx; background: #eee; display: flex; justify-content: space-between; align-items: center; } .footer-btn{ background: skyblue; width: 120rpx; height: 90rpx; color: #fff; text-align: center; line-height: 90rpx; } .allPrice{ color: rgb(245, 62, 62); } .selectall{ color: #666; }