微信小程序购物车效果,供大家参考,具体内容如下
购物车是一个比较简单的小功能。
购物车功能主要运用了微信小程序的缓存机制,在商品页面将需要添加的数据同步传入缓存中,然后在购物页面通过同步方法拿到对应的数据,最后在页面上进行渲染就可以了。
关键方法
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(); }, })以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]