极乐门资源网 Design By www.ioogu.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.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无微信小程序实现购物车小功能的评论...
更新日志
2024年11月15日
2024年11月15日
- 黄妃.2020-色違【米乐士娱乐】【FLAC分轨】
- LouisHayes-ArtformRevisited(2024)[24Bit-96kHz]FLAC
- 永恒英文金曲精选5《TheBestOfEverlastingFavouritesVol.5》[WAV+CUE]
- 黑鸭子2005-紫丁香[首版][WAV+CUE]
- 林忆莲《爱上一个不回家的人》XRCD版[低速原抓WAV+CUE][999M]
- 经典《历届奥斯卡金曲回顾》[正版原抓WAV+CUE] [1G]
- 群星《试音草原·女声篇》经典蒙古民歌[WAV+CUE][1G]
- 炉石传说月末上分卡组推荐 国服月末最快上分卡组推荐
- 炉石传说月底最强卡组有哪些 2024国服月底最强卡组推荐
- 炉石传说月初最强卡组有哪些 2024月初最强上分卡组推荐
- 狼人杀亮相原生鸿蒙之夜 假面科技强势登陆华为生态
- 12小时光线挑战!AI画质专家才是大平层首选
- 2024游戏IP报告:1~9月规模1960亿 68%用户愿为之付费
- 群星.2024-今夜一起为爱鼓掌电视剧原声带【相信音乐】【FLAC分轨】
- BIGFOUR.2013-大家利事【寰亚】【WAV+CUE】