微信小程序购物车效果，供大家参考，具体内容如下

购物车是一个比较简单的小功能。

购物车功能主要运用了微信小程序的缓存机制，在商品页面将需要添加的数据同步传入缓存中，然后在购物页面通过同步方法拿到对应的数据，最后在页面上进行渲染就可以了。

关键方法

var arrlist = wx.getStorageSync(‘key') //获取缓存对应key得数据wx.setStorageSync(‘key'，arrlist) //修改缓存对应key得数据

以下便是购物车页面的详细代码，以供交流参考：
切记要根据自身实际，不要按部就班

wxml部分

<scroll-view class="neirong" scroll-y="true" scroll-with-animation="true"><block wx:for="{{goodsCartList}}" wx:key="this"> <view class="carts"> <view class="cartsxq"> <view class="cartsxq_left"> <image src="{{item.detail.images}}"></image> </view> <view class="cartsxq_right"> <view class="pdtnamestyle">{{item.detail.pdtname}}</view> <view class="pricestyle">￥{{item.detail.price}}</view> <view class="xiaojistyle">金额：{{item.detail.price*item.count}}</view> <view class="gongnengdw"> <view class="jian" bindtap="oper" data-type="-" data-index="{{index}}" > <image src="/images/jian.png"></image> </view> <view class="suliang">{{item.count}}</view> <view class="jia" bindtap="oper" data-type="+" data-index="{{index}}" > <image src="/images/jia.png"></image> </view> </view> </view> </view> </view></block></scroll-view><view class="allTotal"> <view class="allTotal_clear" bindtap="toclears">清空</view> <view class="allTotal_left">总计：{{allTotal}}</view> <view class="allTotal_right">结算</view></view>

wxss部分

.carts{ width: 680rpx; height: auto; margin: 15rpx auto; border-bottom: 1rpx solid #e3e3e3;}.cartsxq{ width: 100%; height: 200rpx; display: flex;}.cartsxq image{ width: 200rpx; height: 150rpx; margin: 30rpx; border-radius: 10rpx;}.cartsxq_left{ flex: 4;}.cartsxq_right{ flex: 7; position: relative;}.gongnengdw{ display: flex; width: 200rpx; height: 50rpx; position: absolute; right: 0; bottom: 10rpx; align-items: center; overflow: hidden;}.gongnengdw image{ width: 40rpx; height: 40rpx;}.jian{ flex: 1; text-align: center;}.jia{ flex: 1; text-align: center;}.suliang{ flex: 1; text-align: center;}.pdtnamestyle{ margin: 10rpx; font-size: 28rpx; padding-top: 28rpx;}.pricestyle{ font-size: 34rpx; color: tomato; margin: 10rpx;}.xiaojistyle{ font-size: 21rpx; color: tomato; margin: 10rpx;}.allTotal{ display: flex; width: 100%; height: 80rpx; border-top: 1rpx solid rgba(0, 0, 0, 0.1); position: fixed; bottom: 0; align-items: center;}.allTotal_clear{ flex: 3; text-align: center; border-right: 1rpx solid rgba(0, 0, 0, 0.2);}.allTotal_left{ flex: 3; text-align: center; border-right: 1rpx solid rgba(0, 0, 0, 0.2);}.allTotal_right{ flex: 3; text-align: center;}.neirong{ height: calc(100vh - 90rpx);}

js部分

// 引用并封装成对象var showData = require("../../utils/data.js")Page({ data: { goodsCartList:[], //总计 allTotal:0 }, //清空方法 toclears:function(e){ var that =this; let cartList =wx.getStorageSync("cartList")||[]; if(cartList != []){ wx.showModal({ title:"提示", content:"您是否要清空购物车", cancelColor: 'cancelColor', success:function(res){ if(res.confirm){ cartList.splice(cartList); wx.setStorageSync("cartList", cartList); that.getNewPage(); } } }) }else if(cartList == []){ wx.showModal({ title:"提示", content:"购物车没东西了", }) } }, //处理加减操作 oper:function(e){ //获取当前对象的type,后赋值给types var types = e.currentTarget.dataset.type; //获取当前对象的index的值，后赋值给index var index = e.currentTarget.dataset.index; ///获取当前数据索引对应的"count"（数量），后赋值给count var count = this.data.goodsCartList[index].count; var isDelet =false; //将一段语句赋值给temp var temp = "goodsCartList["+index+"].count"; //判断当前对象的type值是否与“+”相等，减号以此类推 if(types == '+'){ this.setData({ [temp]:++count }) }else if(types == '-'){ if(count>1){ this.setData({ [temp]:--count }) }else{ isDelet = true; } } //如果同步缓存中的key有cartList 就返回cartList ,若没有则返回空 //然后把同步存储缓存的key赋值给cartList var cartList =wx.getStorageSync("cartList")||[]; var that =this; if(isDelet){ //页面交互 wx.showModal({ title:"提示", content:"您是否要将该商品移出购物车", cancelColor: 'cancelColor', success:function(res){ if(res.confirm){ var newCartel = [] for(let i=0; i<cartList.length;i++){ if(i!= index){ newCartel.push(cartList[i]); } } wx.setStorageSync('cartList', newCartel); that.getNewPage(); } } }) }else{ cartList[index].count = count; wx.setStorageSync('cartList', cartList); } //让cartList[index].count的值与上面创建的count相等 cartList[index].count = count; //默认allTotal为0，因为在onShow方法中已经调用了allTotal，所以在这里我们需要在局部作用域下新创建一个allTotal变量 var allTotal = 0; //把this.data.goodsCartList数据赋值给goodsCartList var goodsCartList = this.data.goodsCartList; for(let i=0; i<goodsCartList.length;i++){ allTotal += goodsCartList[i].detail.price * goodsCartList[i].count; console.log(allTotal); } this.setData({ allTotal:allTotal }) }, //封装总计方法 getNewPage:function(){ var cartIndexList = wx.getStorageSync("cartList"); var cartList = showData.getGoodsListByIndex(cartIndexList); var goodsCartList =[]; var allTotal=0; for(let i=0; i<cartList.length; i++){ goodsCartList.push({ detail:cartList[i], count:cartIndexList[i].count }) allTotal = allTotal + cartList[i].price * cartIndexList[i].count; } this.setData({ goodsCartList:goodsCartList, allTotal:allTotal }) }, //页面同步显示 onShow: function () { this.getNewPage(); },})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。