Applet implement micro-channel radio buttons

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: 'Lost and Found'}, {id: 2, name: 'find things notices'}],
}
 
 
parameterTap: function (e) {
// e is acquired e.currentTarget.dataset.id is therefore necessary, with the front end of the manner of obtaining similar data-id
var that = this
var this_checked = e.currentTarget.dataset.id
var parameterList = this.data.parameter // Get array Json
for (var i = 0; i < parameterList.length; i++) {
if (parameterList[i].id == this_checked) {
parameterList [i] .checked = true; // current click position is true that is selected
}
else {
parameterList [i] .checked = false; // another position is false
}
}
that.setData({
parameter: parameterList
})
},
 
css:
 
.checked_parameter{
background: #36ab60;
padding: 3px;
border-radius: 10px;
color: #fff;
}
 

Guess you like

Origin www.cnblogs.com/lsyy2017/p/11564473.html