wxml
复制代码
<view bindtap='checkedTap'>
<radio checked="{{checked}}">设为默认</radio>
</view>
wxss
复制代码
<style lang="less" >
radio .wx-radio-input {
border-radius: 50%; /* 圆角 */
width: 24rpx;
border: 2rpx solid #5e5e5f;
height: 24rpx;
}
radio .wx-radio-input.wx-radio-input-checked {
border: none;
background: #c1885a;
}
radio .wx-radio-input.wx-radio-input-checked::before {
border-radius: 50%; /* 圆角 */
width: 28rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
height: 28rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
line-height: 28rpx;
text-align: center;
font-size: 20rpx; /* 对勾大小 30rpx */
color: #fff; /* 对勾颜色 白色 */
background: #c1885a;
transform: translate(-50%, -50%) scale(1);
}
</style>
在点击事件中，通过取反即可实现选中与取消。
js
复制代码
data: {
checked:true
},
//是否选中
checkedTap: function () {
this.setData({
"checked": !this.data.checked
})
},