輕松建站 服務(wù)到位為客戶提供一體化網(wǎng)站設(shè)計(jì)服務(wù)
小程序開發(fā)全功能小程序商城、開發(fā)定制服務(wù)、全程售后服務(wù)、無憂備案
分享、交流、傳播知識(shí)分享、技術(shù)交流、經(jīng)驗(yàn)積累、提升能力
在微信小程序開發(fā)購(gòu)物車功能時(shí)，全選，單選是基本需要的功能，一般有的作者喜歡用radio組件實(shí)現(xiàn)，有的喜歡用checkbox組件實(shí)現(xiàn)，本篇文章講解的是radio組件的實(shí)現(xiàn)原理及代碼，好，馬上進(jìn)入正題。
radio組件全選按鈕功能實(shí)現(xiàn)
上圖中商品列表的左邊radio組件就是全選按鈕，實(shí)現(xiàn)思路是：當(dāng)所有子項(xiàng)都選中時(shí)，顯示選中狀態(tài)，否則為不選中狀態(tài)。未選中狀態(tài)時(shí)點(diǎn)擊操作，把所有子項(xiàng)都所中。選中狀態(tài)點(diǎn)擊操作，把所有子項(xiàng)都不選中。
邏輯講完上簡(jiǎn)化后主要邏輯代碼：
先是wxml:
<radio value="0" checked="{{allchecked}}" bindtap="selectAll" color="#d81e06" />商品列表
<view class="car-list" wx:for="{{car_list}}" wx:key="index" wx:for-item="item">
<radio checked="{{item.selected}}" bindtap="selectList" data-index="{{index}}" color="#d81e06" />{{item.title}}
</view>
allchecked是控制全選的選中狀態(tài)的變量，selectAll是全選的點(diǎn)擊事件，selectlist是子項(xiàng)點(diǎn)擊事件。
再是js代碼：
data: {
car_list: [],
allchecked: false,
},
// 全選事件
selectAll(e) {
// 是否全選狀態(tài)
var selectAllStatus = this.data.allchecked;
selectAllStatus = !selectAllStatus;
var dataList = this.data.car_list;
for (let i = 0; i < dataList .length; i++) {
// 改變所有商品狀態(tài)
dataList [i].selected = selectAllStatus;
}
this.setData({
allchecked: selectAllStatus,
car_list: dataList,
});
},
// 選擇事件
selectList(e) {
// 獲取data- 傳進(jìn)來的index
let index = e.currentTarget.dataset.index;
// 獲取購(gòu)物車列表
let dataArr = this.data.car_list;
// 獲取當(dāng)前商品的選中狀態(tài)
let selected = dataArr[index].selected;
// 改變狀態(tài)
dataArr[index].selected = !selected;
this.setData({
car_list: dataArr
});
// 改變?nèi)x狀態(tài)
for (var i = 0; i < this.data.car_list.length; i++) {
// 當(dāng)狀態(tài)為全選時(shí)，每個(gè)元素其中有一個(gè)為false，則取消全選
// 當(dāng)狀態(tài)為非全選時(shí)，每個(gè)元素都為true，則全選
if (this.data.allchecked) {
if (!this.data.car_list[i].selected) {
this.setData({
allchecked: false
});
break;
}
} else {
if (this.data.car_list[i].selected) {
this.setData({
allchecked: true
});
} else {
this.setData({
allchecked: false
});
break;
}
}
}
},
通過以上代碼就能實(shí)現(xiàn)微信小程序radio組件的全選，單選功能實(shí)現(xiàn)，其中car_list是從服務(wù)器加載商品列表，這里如何獲取數(shù)據(jù)就不在本篇講解了。
