微信小程式--單選複選按鈕組的實現
阿新 • • 發佈:2019-02-04
本文主要介紹微信小程式單選按鈕很多選按鈕的實現方式。眾所周知,小程式目前無法繫結DOM截點,實現的原理就是通過bindtap點選的事件方法獲取data-id進行迴圈遍歷取反而實現該效果。
(一)單選按鈕組
模型圖如下:
index.js
Page({
data: {
parameter: [{ id: 1, name: '銀色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }],//模擬商品引數資料,如果是線上版本需要自行發起request請求
},
onLoad: function (options) {
this .data.parameter[0].checked = true;
this.setData({
parameter: this.data.parameter,
})//預設parameter陣列的第一個物件是選中的
},
// 引數點選響應事件
parameterTap:function(e){//e是獲取e.currentTarget.dataset.id所以是必備的,跟前端的data-id獲取的方式差不多
var that=this
var this_checked = e.currentTarget.dataset.id
var parameterList = this .data.parameter//獲取Json陣列
for (var i = 0; i < parameterList.length;i++){
if (parameterList[i].id == this_checked){
parameterList[i].checked = true;//當前點選的位置為true即選中
}
else{
parameterList[i].checked = false;//其他的位置為false
}
}
that.setData({
parameter: parameterList
})
}
})
index.xml
<view class='fwb fz-28 mgt-16 mgb-10'>規格</view>
<view class='parameter-wrap'>
<block wx:for="{{parameter}}" wx:key="parameter">
<text class='parameter-info text-over {{item.checked?"checked_parameter":""}}' data-id='{{item.id}}' bindtap='parameterTap'>{{item.name}}</text>
</block>
</view>
Tips:此處的{{item.checked?”checked_parameter”:”“}}為三元選擇器,即通過checked判斷當前是否為選中樣式,而後進行樣式的新增checked_parameter。
(二)多選按鈕組
模型圖如下:
cartList.js
Page({
data:{
CartList:[],//做空處理,如果購物車為空後端的值沒有改變,容易產生報錯
},
onLoad: function () {
// 獲取購物車請求
var that = this;
wx.request({
url: request_getCartList,//向後端發起請求,此處的是get的方式,如需要ajax請參照本站內的相關文章
data: {
"session3rd": userid,
},
success: function (res) {
if (res.data.code == -2) {
that.setData({
CartList: []
})
}
if(res.data.code==1){
that.setData({
CartList: list
})
}
}
})
},
// 多選
chooseOs: function (event) {
for (var i = 0; i < this.data.CartList.length; i++) {
if (event.currentTarget.id == this.data.CartList[i].id) {
if (this.data.CartList[i].checked == true) {
this.data.CartList[i].checked = false;
var CartList = this.data.CartList;
this.setData({
CartList//重定義CartList,使購物車的樣式實現區域性重新整理
})
} else {
this.data.CartList[i].checked = true;
var CartList = this.data.CartList;
this.setData({
CartListt//重定義CartList,使購物車的樣式實現區域性重新整理
})
}
}
}
},
})
cart.xml
<block wx:for="{{CartList}}" wx:key="">
<view class="order-out user-shadow mgb-20 nowrap">
<view class="check-btn" catchtap='chooseOs' id="{{item.id}}">
<image class="absoult-v" src="{{imgSrc}}{{item.checked?'type_1':'type_0'}}.png" mode="widthFix"></image>
</view>
</view>
</block>
Tips:前端頁面通過catchtap的事件捕捉的方式,呼叫chooseOs的方法,獲取當前點選物件的id即id=”{{item.id}}”,然後對選中的事件新增樣式this.data.CartList[i].checked = true;,對未選中的事件刪除樣式this.data.CartList[i].checked = false;
(三)複選拓展-全選全不選
cart.xml
<view class="all-btn" bindtap='allCheckTap' wx:if="{{!checked}}">
<image src="{{imgSrc}}{{checked?'type_1':'type_0'}}.png" mode="widthFix"></image>
<text>全選</text>
</view>
<view class="all-btn" bindtap='allCheckTap' wx:if="{{checked}}">
<image src="{{imgSrc}}{{checked?'type_1':'type_0'}}.png" mode="widthFix"></image>
<text>全不選</text>
</view>
Tips:此處的‘全選’和‘全不選’沒有合併,需要小碼農們自行整合。
cartList.js
// 全選按鈕
allCheckTap: function () {
this.setData({
checked: !this.data.checked,
})
if (this.data.checked) {
for (var i = 0; i < this.data.CartList.length; i++) {
if (this.data.CartList[i].checked !== true) {
this.data.CartList[i].checked = true;
var CartList = this.data.CartList;
this.setData({
CartList
})
}
}
}
else {
for (var i = 0; i < this.data.CartList.length; i++) {
if (this.data.CartList[i].checked == true) {
this.data.CartList[i].checked = false;
var CartList = this.data.CartList;
this.setData({
CartList
})
}
}
}
},
tips:全選跟全部不選的邏輯比較簡單就是,將所有所有的checked迴圈遍歷this.data.CartList[i].checked == true或false,然後通過this.setData({CartList})重新定義一下,實現區域性重新整理。