微信小程序实现加入购物车功能

在这里插入图片描述

文件wxml

<view class="footer-three" catchtap="addShop" data-id="{{item}}">加入购物车</view>

js

let carts = wx.getStorageSync(‘carts’) || []; 去缓存找购物车

 addShop(){//加入购物车
    let carts = wx.getStorageSync('carts')||[];//获取储存中的购物车
    let index = carts.findIndex(v=>v.goods_id===this.data.swiperList.goods_id)
    //findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
    //如果储存里的商品id=本地数据商品id 则返回此元素位置
    if(index===-1){//如果购物车为空
      this.data.swiperList.num=1;//添加一个数量属性
      this.data.swiperList.selected=true;//添加一个判断是否勾选的属性
      carts.push(this.data.swiperList)//把本地商品添加进购物车
      wx.setStorageSync('carts', carts)//添加成功后储存购物车
    }else{//购物车不为空
      carts[index].num++;//一样的商品数量叠加
      wx.setStorageSync('carts', carts)//重新储存购物车
    }
    wx.showToast({//加入后的提示弹框
      title: '加入成功',
      icon:'success',
      mask:true,
    })
    console.log(carts)
  },
  • 7
    点赞
  • 92
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
以下是一个简单的微信小程序实现加入购物车功能代码示例: 1. 在 wxml 文件中添加一个“加入购物车”的按钮和商品数量的输入框: ``` <!--商品数量--> <input type="number" value="{{goodsNum}}" bindinput="bindGoodsNum" /> <!--加入购物车按钮--> <button bindtap="addCart">加入购物车</button> ``` 2. 在 js 文件中添加商品数量和加入购物车的事件处理函数: ``` Page({ data: { // 商品数量 goodsNum: 1, }, // 输入框输入商品数量 bindGoodsNum(e) { this.setData({ goodsNum: e.detail.value }) }, // 加入购物车 addCart() { let goodsNum = this.data.goodsNum; // 将商品数量和商品信息存入本地存储或者数据库中 // ... wx.showToast({ title: '加入购物车成功', icon: 'success', duration: 2000 }) } }) ``` 3. 在 app.json 文件中添加购物车页面的路由: ``` { "pages": [ "pages/index/index", "pages/cart/cart" ], "window": { "navigationBarTitleText": "微信小程序购物车示例" }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/cart/cart", "text": "购物车" } ] } } ``` 4. 在购物车页面的 wxml 文件中添加购物车列表: ``` <scroll-view scroll-y="true" style="height: 100%;"> <view wx:for="{{cartList}}" wx:key="index"> <view>{{item.goodsName}}</view> <view>数量:{{item.goodsNum}}</view> </view> </scroll-view> ``` 5. 在购物车页面的 js 文件中获取购物车列表: ``` Page({ data: { // 购物车列表 cartList: [] }, // 页面显示时获取购物车列表 onShow() { // 从本地存储或者数据库中获取购物车列表 // ... this.setData({ cartList: cartList }) } }) ``` 以上是一个简单的微信小程序实现加入购物车功能代码示例,具体实现方式可以根据自己的需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值