怎么在微信小程序中实现一个购物车功能
创始人
2024-12-27 16:02:24
0次

关键方法

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

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

wxml部分



  
  
   
    
   
   
    {{item.detail.pdtname}}
    ¥{{item.detail.price}}
    金额:{{item.detail.price*item.count}}
    
     
      
     
     {{item.count}}
     
      
     
    
   
  
 





 清空
 总计:{{allTotal}}
 结算

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                
            

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...