微信小程式開發中如何實現電商購物車邏輯

php中世界最好的语言
發布: 2018-06-05 11:51:20
原創
2832 人瀏覽過

給大家分享一個關於小程式購物車全選的邏輯處理,這個還是要感謝我的老妹教導我,一個開發人員做東西一定要嚴謹,不管UI設計的有多醜,該有的邏輯你一定要做到。

首先我們要做到的就是,當使用者點擊第三個商品時全選按鈕自動選中,或是全選之後,只要有一個商品不選中,全選按鈕也要變動。先給大家看一下程式碼:

你要在頁面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();
},
登入後複製
登入後複製
  • 上面的程式碼,先做的就是單選的頁面渲染效果。判斷部分的程式碼就是最主要的處理全選邏輯的一步。相信你看到這裡也注意到我在data裡定義了一個allclick的空數組,然後就是接下來的邏輯:

  • 按鈕選取時取出對應item的角標放到新的arr裡,這裡因為我之前結算的邏輯已經搞好了,我就隨便往數組裡push數據,但其實可以作為對應商品的更重要的一些數據處理。

  • 按鈕不選取是從新的arr裡找到這個item對應下標的資料移除

  • 完成上面兩步驟處理之後,每次按鈕狀態改變的時候判斷arr的長度和cart的長度。

這就是我的處理,也可以循環,實現的方式有很多,只是拿出來讓沒有接觸過的小伙伴做個參考~

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數組。

  • 當全選勾選的時候全部改變商品資訊裡的按鈕為true,先清空,接著重新push,再賦值。

經過這幾步操作之後就解決了全選這方面的所有邏輯

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

微信小程式開發switchTab如何使用

################################################################################################################## #####微信小程式開發怎樣寫程式碼##########

以上是微信小程式開發中如何實現電商購物車邏輯的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板