微信小程序简单实现购物车功能

最新推荐文章于 2025-04-11 22:32:43 发布

置顶

三脚猫的喵

最新推荐文章于 2025-04-11 22:32:43 发布

阅读量6.1k

点赞数 29

分类专栏：微信小程序文章标签： javascript 微信小程序小程序前端

本文链接：https://blog.csdn.net/weixin_45465881/article/details/138231566

版权

微信小程序简单实现购物车结算和购物车列表展示功能

实现在微信小程序中对每一个购物车界面的商品订单，进行勾选结算和取消结算的功能，相关界面截图如下：

具体实现示例代码为：
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 < list.length; i++) {
   
      for (let k = 0; k < attr.length; k++) {
   
        if (list[i].id === attr[k])