微信小程序开发--1.6表单选择组件(switch、radio和checkbox)

一. 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;//修改对号大小
}