微信小程序简单实现购物车结算和购物车列表展示功能
实现在微信小程序中对每一个购物车界面的商品订单,进行勾选结算和取消结算的功能,相关界面截图如下:
具体实现示例代码为:
1、js代码:
Page({ /** * 页面的初始数据 */ data: { checked: false, checkAll: false, dataList: [{ id: '000', img: 'https://img-blog.csdnimg.cn/img_convert/0e449547f8e5354646f76af0d1b4800a.png', content: '生活百般滋味,编写不易,关注博主,分享更多内容呦', price: 3289, showPrice: '32.89', number: 1 }, { id: '111', img: 'https://img2.baidu.com/it/u=2681955314,221996905&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300', content: '努力学习,天天向上,进我主也查看更多内容', price: 2456, showPrice: '24.56', number: 2 }, { id: '222', img: 'https://img-blog.csdnimg.cn/img_convert/0e449547f8e5354646f76af0d1b4800a.png', content: '关注博主,分享更多内容,欢迎批评指导', price: 3289, showPrice: '89.89', number: 5 }, ], totalMoney: '0.00', selectDatas: [] }, // 查看详情 detailClick(e) { let data = e.currentTarget.dataset.item; wx.showToast({ title: '点击了查看详情', icon: 'none' }) console.log('详情数据:', data) }, // 单选 checkboxChange(e) { let money = 0, str = []; let attr = e.detail.value; let list = this.data.dataList; for (let i = 0; i 0) ? true : false }) }, // 全选 checkboxChangeAll(e) { let money = 0, str = []; let val = e.detail.value; let list = this.data.dataList; if (val.length > 0) { for (let i = 0; i { if (res.confirm) { wx.showToast({ title: '结算完成', }) } } }) }, })
2、wxml代码:
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...