首页 > 微信 > 详细

微信小程序 单选按钮 最佳

时间:2019-09-21 22:19:58      阅读:577      评论:0      收藏:0      [点我收藏+]

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;
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
})
},
 
css:
.button_container{
display: flex;
flex-direction: row;
justify-content: space-around
}
/* 按钮未选中 */
.normal_button{
background: white;
}
/* 按钮选中 */
.checked_button{
background: #36ab60;
color: white
}

微信小程序 单选按钮 最佳

原文:https://www.cnblogs.com/lsyy2017/p/11564524.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!