wxml
<view bindtap='checkedTap'>
<radio checked="{{checked}}">设为默认</radio>
</view>
wxss
/* 自定义 radio 样式 */
radio .wx-radio-input{
border-radius: 50%;
width: 28rpx;
height: 28rpx;
}
/* 选中后的样式 (可根据需求自己修改) */
radio .wx-radio-input.wx-radio-input-checked::before{
border-radius: 50%;
width: 44rpx;
height: 44rpx;
line-height: 44rpx;
text-align: center;
font-size: 28rpx; /* 对勾大小 */
color:#fff; /* 对勾颜色 */
background: #2facff;
border-color: #2facff;
}
js
data: {
checked:true
},
//是否选中
checkedTap: function () {
this.setData({
"checked": !this.data.checked
})
},
原理
1.在wxml的radio中,有一个选中状态的赋值,checked="{{checked}}" , 给绑定点击事件checkedTap。
2.接着在data中,声明checked为true。
3.然后在点击事件中,通过取反即可实现选中与取消。