一. switch组件(开关选择器)
代码如下:
<switch bindchange="函数名" checked="{{true/false}}"></switch>
函数名(e){
this.setData({
变量名: e.detail.value
})
},
二. radio组件(单选按钮)
<radio checked="{{true/false}}" bindtap="函数名"></radio>
样式修改,wxss中的代码如下:
radio .wx-radio-input {
width: 28rpx;
height: 28rpx;
border: 4rpx solid #C5CBED;
border-radius: 100%;
background: none;
}
/*单选按钮选中后内部样式*/
radio .wx-radio-input.wx-radio-input-checked {
border: 4rpx solid #C5CBED !important;
background-color:#C5CBED !important;
}
radio .wx-radio-input.wx-radio-input-checked::before {
width: 28rpx;
height: 28rpx;
border-radius: 100%;
font-size:28rpx; /* 对勾大小 */
color:white;
}
三. checkbox组件(多选组件)
//循环列表展示多选框
<checkbox checked="{{item.isSelected}}" data-index="{{index}}" bindtap="函数名"></checkbox>
样式修改,wxss中的代码如下:
checkbox .wx-checkbox-input {
width: 28rpx;
height: 28rpx;
border: 4rpx solid #C5CBED;
border-radius: 100%;
background: none;
}
/*单选按钮选中后内部样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
border: 4rpx solid #C5CBED !important;
background-color:#C5CBED !important;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 28rpx;
height: 28rpx;
border-radius: 100%;
content: '';//去除选中后的对号
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
注意:
如果上述单选按钮/多选按钮css代码对样式并未做实际修改,那么可以对组件添加class="class名",在wxss文件里添加如下:
.class名::before{
right:8rpx;//修改对号位置
top:22rpx;//修改对号位置
font-size:28rpx;//修改对号大小
}