// page3.js
Page({
data:{
option1: [
{ value: "1", contant: "A:xxxx", checked: false },
{ value: "2", contant: "B:xxxx", checked: false },
{ value: "3", contant: "C:xxxx", checked: false },
{ value: "4", contant: "D:xxxx", checked: false }
],
},
swiperChange: function(e){
var that = this;
console.log(that.data.option1[e.detail.value - 1].checked);
that.data.option1[e.detail.value - 1].checked = true;
}
})
<!--page3.wxml-->
<radio-group bindchange="swiperChange">
<label class="option" wx:for="{{option1}}" >
<radio value="{{item.value}}" checked="{{item.checked}}" />{{item.contant}}
<icon type="success_no_circle" size="24" class="icon" style="display:{{item.checked ? 'inline-block' : 'none'}}" />
</label>
</radio-group>
/* page3.wxss */
radio{
display: none
}
.option{
border: 1px solid #ffe131;
display: block;
text-align: center;
margin: 10% auto;
width: 80%;
}请问在小程序中如何让icon在选项选中时自动显示
天蓬老师2017-07-05 11:09:47
我只是修改一下swiperChange函数：
swiperChange: function (e) {
this.data.option1.forEach( (item) => {
item.checked = item.value === e.detail.value? true:false;
});
this.setData({
option1: this.data.option1
});
}