富贵资源网 Design By www.hznty.com
微信小程序购物车效果,供大家参考,具体内容如下
购物车是一个比较简单的小功能。
购物车功能主要运用了微信小程序的缓存机制,在商品页面将需要添加的数据同步传入缓存中,然后在购物页面通过同步方法拿到对应的数据,最后在页面上进行渲染就可以了。
关键方法
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="/UploadFiles/2021-04-02/{{item.detail.images}}">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(); }, })以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。