小程序 中 自定義單選框樣式
阿新 • • 發佈:2019-02-14
eid function bind ems city his try ava html
data數據
<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>
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; }
小程序 中 自定義單選框樣式