当前位置 : 主页 > 网页制作 > xml >

微信小程序 单选按钮的实现

来源:互联网 收集:自由互联 发布时间:2021-06-13
wxml: view class=‘parameter-wrap‘ block wx:for="{{parameter}}" wx:key="parameter" button class=‘parameter-info text-over {{item.checked?"checked_parameter":""}}‘ data-id=‘{{item.id}}‘ bindtap=‘parameterTap‘{{item.name}}/bu

wxml:

<view class=‘parameter-wrap‘> <block wx:for="{{parameter}}" wx:key="parameter"> <button class=‘parameter-info text-over {{item.checked?"checked_parameter":""}}‘ data-id=‘{{item.id}}‘ bindtap=‘parameterTap‘>{{item.name}}</button> </block> </view>   js:   data:{ parameter: [{ id: 1, name: ‘失物招领‘ }, { id: 2, name: ‘寻物启事‘ }], }     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 }) },   css:   .checked_parameter{ background: #36ab60; padding: 3px; border-radius: 10px; color: #fff; }  
网友评论