转载地址: https://blog.csdn.net/qq_38209578/article/details/78810981
本文主要介绍微信小程序单选按钮很多选按钮的实现方式。众所周知,小程序目前无法绑定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
})
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
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>
- 1
- 2
- 3
- 4
- 5
- 6
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,使购物车的样式实现局部刷新
})
}
}
}
},
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
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
})
}
}
}
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
tips:全选跟全部不选的逻辑比较简单就是,将所有所有的checked循环遍历this.data.CartList[i].checked == true或false,然后通过this.setData({CartList})重新定义一下,实现局部刷新。