小程序開發(fā)中實(shí)現(xiàn)電商購(gòu)物車邏輯的方法

這篇文章給大家分享的是有關(guān)小程序開發(fā)中實(shí)現(xiàn)電商購(gòu)物車邏輯的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)長(zhǎng)期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為商都企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)，商都網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

給大家分享一個(gè)關(guān)于小程序購(gòu)物車全選的邏輯處理，這個(gè)還是要感謝我的老妹教導(dǎo)我，一個(gè)開發(fā)人員做東西一定要嚴(yán)謹(jǐn)，不管UI設(shè)計(jì)的有多丑，該有的邏輯你一定要做到。

cdn.xitu.io/2018/5/29/163aa02a3b1fbc66?imageView2/0/w/1280/h/960/format/webp/ignore-error/1">

首先我們要做到的就是，當(dāng)用戶點(diǎn)擊第三個(gè)商品時(shí) 全選按鈕自動(dòng)選中，或者全選之后，只要有一個(gè)商品不選中，全選按鈕也得變動(dòng)。先給大家看一下代碼：

你要在頁(yè)面onload時(shí)候定義一些你需要每次渲染的數(shù)據(jù)

data: {
likeList: [],
carts:[], // 購(gòu)物車列表
hasList:false, // 列表是否有數(shù)據(jù)
//totalPrice:0, // 總價(jià)，初始為0
selectAllStatus:false, // 全選狀態(tài)，默認(rèn)全選,
goodsNums:0,
allclick:[]
}
每件商品單個(gè)選中的的邏輯處理
selectList(e) {
  const index = e.currentTarget.dataset.index;// 獲取每一個(gè)點(diǎn)擊的購(gòu)物車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();
},

• 上面的代碼，先做的就是單選的頁(yè)面渲染效果。判斷部分的代碼就是最主要的處理全選邏輯的一步。相信你看到這里也注意到我在data里定義了一個(gè)allclick的空數(shù)組，然后就是接下來的邏輯：

• 按鈕選中時(shí)取出對(duì)應(yīng)item的角標(biāo)放到新的arr里，這里因?yàn)槲抑敖Y(jié)算的邏輯已經(jīng)搞好了，我就隨便往數(shù)組里push數(shù)據(jù)，但其實(shí)可以作為對(duì)應(yīng)商品的更重要的一些數(shù)據(jù)處理。

• 按鈕不選中是從新的arr里找到這個(gè)item對(duì)應(yīng)下標(biāo)的數(shù)據(jù)移除

• 完成上面兩步處理之后，每次按鈕狀態(tài)發(fā)生變化的時(shí)候判斷arr的長(zhǎng)度和cart的長(zhǎng)度。

這就是我的處理，也可循環(huán)，實(shí)現(xiàn)的方式有很多，只是拿出來讓沒有接觸過的小伙伴做個(gè)參考～

data: {
likeList: [],
carts:[], // 購(gòu)物車列表
hasList:false, // 列表是否有數(shù)據(jù)
//totalPrice:0, // 總價(jià)，初始為0
selectAllStatus:false, // 全選狀態(tài)，默認(rèn)全選,
goodsNums:0,
allclick:[]
}
每件商品單個(gè)選中的的邏輯處理
selectList(e) {
  const index = e.currentTarget.dataset.index;// 獲取每一個(gè)點(diǎn)擊的購(gòu)物車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();
},

• 這段代碼也還是先處理全選的狀態(tài)，然后就是關(guān)聯(lián)狀態(tài)的處理，

• 當(dāng)全選沒有勾選的時(shí)候全部改變商品信息里的按鈕為false，直接清空allclick數(shù)組。

• 當(dāng)全選勾選的時(shí)候全部改變商品信息里的按鈕為true，先清空，接著重新push，再賦值。

經(jīng)過這幾步操作之后就解決了全選這方面的所有邏輯

感謝各位的閱讀！關(guān)于小程序開發(fā)中實(shí)現(xiàn)電商購(gòu)物車邏輯的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

當(dāng)前名稱：小程序開發(fā)中實(shí)現(xiàn)電商購(gòu)物車邏輯的方法
本文網(wǎng)址：http://www.muchs.cn/article28/piehjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、網(wǎng)站內(nèi)鏈、虛擬主機(jī)、商城網(wǎng)站、云服務(wù)器、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)