本文实例为大家分享了微信小程序实现单选按钮的具体代码,供大家参考,具体内容如下
逻辑
- 单选框的逻辑比较简单,把所有的元素遍历出来,等到点击单选按钮的时候,当value值与遍历变量值一致的时候就 把checked 设置为true,其他的时候把checked设置为 false 只需要一次循环。
- 复选框的逻辑,也不复杂,当只有一个被选中的选项的时候,当点击已经选择的选项的时候,首选外层循环设置为false,这个时候 e.detail.value为零,所以无法进入内层循环,所以被取消。当选中未选择的选项的时候,则从第一个选项开始遍历,如果value值与外层相同则设置为TRUE。然后跳出内层,继续遍历,当有两个选中的选项的时候,点击已经选择的按钮,values值会减少l,所以最后一次的外层循环无法进入内层,所有取消该选项。
举例, 两选一 , 默认选中第一个;效果图如下:
.wxml文件 :
<view class='button_container'>
<block wx:for="{{buttons}}" wx:key="buttons">
<button class='{{item.checked?"checked_button":"normal_button"}}' data-id='{{item.id}}' bindtap='radioButtonTap'>{{item.name}}</button>
</block>
</view>
.js文件 :
Page({
data:{
buttons: [{ id: 1, name: '失物招领' }, { id: 2, name: '寻物启事' }]
},
onLoad: function() {//默认选了第一个
this.data.buttons[0].checked = true;
this.setData({
buttons: this.data.buttons,
})
},
radioButtonTap: function (e) {
console.log(e)
let id = e.currentTarget.dataset.id
console.log(id)
for (let i = 0; i < this.data.buttons.length; i++) {
if (this.data.buttons[i].id == id) {
//当前点击的位置为true即选中
this.data.buttons[i].checked = true;
}
else {
//其他的位置为false
this.data.buttons[i].checked = false;
}
}
this.setData({
buttons: this.data.buttons
})
}
})
.wxss文件 :
.button_container{
display: flex;
flex-direction: row;
justify-content: space-around
}
.normal_button{
background: white;
}
.checked_button{
background: #36ab60;
color: white
}```
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。