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

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

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

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

关键方法

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();
 },

})

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