給大家分享一個關于小程序購物車全選的邏輯處理，這個還是要感謝我的老妹教導我，一個開發人員做東西一定要嚴謹，不管UI設計的有多丑，該有的邏輯你一定要做到。愛掏網 - it200.com
首先我們要做到的就是，當用戶點擊第三個商品時 全選按鈕自動選中，或者全選之后，只要有一個商品不選中，全選按鈕也得變動。愛掏網 - it200.com先給大家看一下代碼：
你要在頁面onload時候定義一些你需要每次渲染的數據
data:?{
likeList:?[],
carts:[],?//?購物車列表
hasList:false,?//?列表是否有數據
//totalPrice:0,?//?總價，初始為0
selectAllStatus:false,?//?全選狀態，默認全選,
goodsNums:0,
allclick:[]
}
每件商品單個選中的的邏輯處理
selectList(e)?{
??const?index?=?e.currentTarget.dataset.index;//?獲取每一個點擊的購物車ID??let?carts?=?this.data.carts,
??selected?=?carts[index].select,
??all?=?this.data.allclick;
??carts[index].select?=?!selected;
carts[index].select?==?true???all.push(index):all.splice(index,1);
all.length?==?carts.length??
this.setData({
??selectAllStatus:?true}):this.setData({
??selectAllStatus:?false});
??this.getTotalPrice();
},
登錄后復制
登錄后復制
上面的代碼，先做的就是單選的頁面渲染效果。愛掏網 - it200.com判斷部分的代碼就是最主要的處理全選邏輯的一步。愛掏網 - it200.com相信你看到這里也注意到我在data里定義了一個allclick的空數組，然后就是接下來的邏輯：
按鈕選中時取出對應item的角標放到新的arr里，這里因為我之前結算的邏輯已經搞好了，我就隨便往數組里push數據，但其實可以作為對應商品的更重要的一些數據處理。愛掏網 - it200.com
按鈕不選中是從新的arr里找到這個item對應下標的數據移除
完成上面兩步處理之后，每次按鈕狀態發生變化的時候判斷arr的長度和cart的長度。愛掏網 - it200.com
這就是我的處理，也可循環，實現的方式有很多，只是拿出來讓沒有接觸過的小伙伴做個參考～
data:?{
likeList:?[],
carts:[],?//?購物車列表
hasList:false,?//?列表是否有數據
//totalPrice:0,?//?總價，初始為0
selectAllStatus:false,?//?全選狀態，默認全選,
goodsNums:0,
allclick:[]
}
每件商品單個選中的的邏輯處理
selectList(e)?{
??const?index?=?e.currentTarget.dataset.index;//?獲取每一個點擊的購物車ID??let?carts?=?this.data.carts,
??selected?=?carts[index].select,
??all?=?this.data.allclick;
??carts[index].select?=?!selected;
carts[index].select?==?true???all.push(index):all.splice(index,1);
all.length?==?carts.length??
this.setData({
??selectAllStatus:?true}):this.setData({
??selectAllStatus:?false});
??this.getTotalPrice();
},
登錄后復制
登錄后復制
這段代碼也還是先處理全選的狀態，然后就是關聯狀態的處理，
當全選沒有勾選的時候全部改變商品信息里的按鈕為false，直接清空allclick數組。愛掏網 - it200.com
當全選勾選的時候全部改變商品信息里的按鈕為true，先清空，接著重新push，再賦值。愛掏網 - it200.com
經過這幾步操作之后就解決了全選這方面的所有邏輯
相信看了本文案例你已經掌握了方法，更多精彩請關注愛掏網 - it200.com其它相關文章！
推薦閱讀：
微信小程序開發switchTab如何使用
微信小程序開發怎樣編寫代碼
以上就是微信小程序開發中怎樣實現電商購物車邏輯的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！