










微信小程序商城時(shí),購(gòu)物車(chē)是最基本的功能,也是最重要的功能之一。
在開(kāi)發(fā)過(guò)程中,對(duì)于商品的管理有,增加數(shù)量,減少數(shù)量,勾選(radio)操作,刪除,全選,統(tǒng)計(jì)等動(dòng)作。
每個(gè)操作都離不開(kāi)radio組件,但有些是使用復(fù)選框(checkbox)實(shí)現(xiàn),本文就針對(duì)radio組件來(lái)講解代碼的這關(guān)現(xiàn)。
首先要明確一點(diǎn),做開(kāi)發(fā)時(shí),先整理思路,如果思路還不明確時(shí),盡量抽點(diǎn)時(shí)間去把思路整理明確,這對(duì)開(kāi)發(fā)代碼修改幫助非常大。
很多文章介紹了單個(gè)刪除的功能,其實(shí)做了批量刪除功能后,單個(gè)就沒(méi)必要去實(shí)現(xiàn)了,因?yàn)橛脩艨梢赃x中一個(gè),然后點(diǎn)擊刪除,這樣就省去在界面中多做一個(gè)基本沒(méi)作用的功能了,所以本篇就講解批量刪除功能的實(shí)現(xiàn)。
看先界面:
紅色框出來(lái)的按鈕就是實(shí)現(xiàn)批量刪除的按鈕,除了這個(gè)按鈕,我們還需要配合radio組件的功能,其中radio組件功能可以看作者上一篇的文章,點(diǎn)擊查看。
wxml關(guān)鍵代碼:
<button class="del-btn" bindtap="dellist">刪除</button>
wxjs關(guān)鍵代碼:
dellist:function(){
var that=this;
var carlist=that.data.car_list;
for (var i = 0; i < carlist.length; i++) {
if (carlist[i].selected) {
carlist.splice(i,1);//刪除
i--;
}
}
that.setData({
car_list: carlist
})
},
其中car_list是商品數(shù)組,使用splice如果不用for是只能刪除一個(gè)的,在剛開(kāi)始查網(wǎng)上有的說(shuō)是先記錄下標(biāo)即index位置,然后再根據(jù)數(shù)量自增的方式去刪除后面的數(shù)據(jù),這樣是不可以實(shí)現(xiàn)的,如在網(wǎng)上有個(gè)作者這樣寫(xiě):
以上代碼只是連續(xù)刪除第一個(gè)下標(biāo)開(kāi)始之后的數(shù)據(jù),這樣明顯是存在BUG的,所以有時(shí)候在網(wǎng)上查閱信息時(shí),還得自己去詳細(xì)分析一下,然后改成自己所需要的內(nèi)容。