微信小程式實現購物車小功能
阿新 • • 發佈:2020-12-31
微信小程式購物車效果,供大家參考,具體內容如下
購物車是一個比較簡單的小功能。
購物車功能主要運用了微信小程式的快取機制,在商品頁面將需要新增的資料同步傳入快取中,然後在購物頁面通過同步方法拿到對應的資料,最後在頁面上進行渲染就可以了。
關鍵方法
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.1); position: fixed; bottom: 0; align-items: center; } .allTotal_clear{ flex: 3; text-align: center; border-right: 1rpx solid rgba(0,0.2); } .allTotal_left{ flex: 3; text-align: center; border-right: 1rpx solid rgba(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:"您是否要將該商品移出購物車",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(); },})
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。