小程序 中 自定义单选框样式
<radio-group name="country" class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{items}}" wx:key="{{index}}"> <radio value='{{item.value}}' checked='{{item.checked}}'></radio> <!-- <radio value="{{item.name}}" checked="{{item.checked}}" /> --> <block wx:if="{{yjIndex == item.value}}"> <image src='../img/diananniu_yidian.png'></image> </block> <block wx:else> <image src='../img/diananniu_weidian.png'></image> </block> {{item.name}} </label> </radio-group>
data数据
items:[ { name: '是', value: 1 }, { name: '否', value: 0 ,checked:true} ],
yjIndex:0,
单选点击事件
radioChange:function (event) { this.setData({ yjIndex: event.detail.value }) },
CSS样式
.radio{ position:relative; } .radio radio{ opacity: 0; } .radio image{ position:absolute; top:0; left:0; width:44rpx; height:44rpx; }