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

小沐°

已于 2023-12-02 14:56:00 修改

阅读量2.6k

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序

于 2023-06-29 23:07:36 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46479909/article/details/131466015

版权

微信小程序专栏收录该内容

30 篇文章

订阅专栏

文章介绍了如何在微信小程序中使用switch组件来创建开关选择器，通过bindchange事件处理选中状态，并展示了相关的数据绑定。同时，详细说明了radio组件（单选按钮）的用法，包括样式修改和选中状态的表示。对于checkbox组件（多选组件），文章也给出了循环列表展示及状态绑定的示例，并提供了自定义样式的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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