话不多说,直接上码,复制粘贴直接上手
html
<view class="radio-box" wx:for="{{radios}}" key="item.id">
<lebel class="radio {{ index==sex ? 'on' : ''}}" data-index='{{index}}' data-value='{{item.value}}' bindtap="check">
<image wx:if='{{index==sex}}' src='../../images/arrow.png'></image>
</lebel>{{item.label}}
</view>
js
Page({
data: {
sex: 0,
radios: [
{
label: '男',
value: '男',
},
{
label: '女',
value: '女',
},
]
},
check(e) {
console.log(e)
var that = this;
var sex = e.currentTarget.dataset.index
that.setData({
sex:sex
})
},
})
css
.radio-box{
display: inline-block;
position: relative;
height: 15px;
line-height: 15px;
margin-right: 5px;
font-size: 26rpx;
}
.input-radio {
display: inline-block;
position: absolute;
opacity: 0;
width: 15px;
height: 15px;
cursor: pointer;
left: 0px;
outline: none;
-webkit-appearance: none;
}
.radio {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
vertical-align: middle;
cursor: pointer;
background: #D7D7D9;
}
.on{
background: wheat
}
lebel image{
width: 15px;
height: 15px;
}