怎么在微信小程序中实现一个购物车功能

本篇文章为大家展示了怎么在微信小程序中实现一个购物车功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

关键方法

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部分

/* pages/carts/carts.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();  }, })

上述内容就是怎么在微信小程序中实现一个购物车功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。