微信小程序开发实战（10）：单选、多选和开关组件

怼烎@ 2023-02-26 14:26 18阅读 0赞

\-----------支持作者请转发本文-----------

1.  单选组件（radio）

radio是选项按钮组件，该组件不能单独使用，必须作为radio-group的子组件使用，否则多个radio只有一个被选中。

如果要监听radio组件的触发事件，需要使用radio-group组件的bindchange属性，该属性绑定的函数需要指定一个参数（假设为event），通过event.detail.value，可获取当前选中了哪个radio。

radio组件有如下3个属性。

*  value：String类型，radio组件的返回值，当radio组件被选中时，radio-group组件的change事件会返回选中radio组件的value值，也就是event.detail.value返回的值
 *  checked：Boolean类型，默认值时false，表示当前radio组件是否被选中
 *  disabled：Boolean类型，默认值时false，表示当前radio组件是否被禁用

下面的布局代码演示了如何使用radio组件，这段代码中，在label组件中使用了wx:for-items属性，在生成了多个radio（根据items数组元素个数），并利用当前数组元素对象的不同属性分别设置了边距（margin）、radio组件的value属性值、radio组件默认是否被选中（checked），以及radio组件后面显示的文本。

<radio-group bindchange="radioChange">
      <label style="display:block;margin:{
        {item.margin}}px" wx:for-items="{
        {items}}">
        <radio value="{
        {item.name}}" checked="{
        {item.checked}}" />{
        {item.value}}
      </label>
    </radio-group>

布局的显示效果如图1所示。

![format_png][]

图1  radio组件的效果

实际上，这段布局代码如果不适用循环，相当于如下形式，也就是说，wx:for-items属性会循环生成多个label组件以及子组件。

<radio-group bindchange="radioChange">
      <label style="display:block;margin:10px" >
        <radio value="USA" checked="false" />美国
      </label>
      <label style="display:block;margin:20px" >
        <radio value="CHN" checked="true" />中国
      </label>
      … …
      //  省略了其他label标签
    </radio-group>

要注意的是，如果radio-group中有多个radio组件的checked属性都设为true，那么系统会默认选中最后一个checked属性设为true的radio组件。

下面是完整的JavaScript代码的实现。

Page({
      data: {
        items: [
          {name: 'USA', value: '美国', margin:10},
          {name: 'CHN', value: '中国', checked: 'true',margin:20},
          {name: 'BRA', value: '巴西',margin:30},
          {name: 'JPN', value: '日本',margin:40},
          {name: 'ENG', value: '英国',margin:50},
          {name: 'FRA', value: '法国',margin:60},
        ]
      },
     
       //  相应radio组件变化的函数
      radioChange: function(e) {
        console.log('radio发生change事件，携带value值为：', e.detail.value)
      }
    })

2. 多选组件（checkbox）

checkbox组件的作用是设置选中状态，可以多选，也就是可以多个checkbox放在一起，多个复选框选中后，可以获取选中的结果。checkbox必须和checkbox-group一起使用，checkbox将作为checkbox-group的子组件。

checkbox-group有一个bindchange属性，用于绑定checkbox组件变化的事件。checkbox包含如下3个属性。

*  value：String类型。checkbox组件对应的值，该值可以通过change事件的参数获得；
 *  disabled：Boolean类。默认值是false。用于禁用checkbox组件；
 *  checked：Boolean类。默认值是false。用于设置checkbox组件当前是否被选中，可用来设置默认选中；

下面的布局代码通过wx:for-items循环生成了6个checkbox组件，这些组件都在checkbox-group中。

<view style="margin:20px">
      <checkbox-group bindchange="checkboxChange">
        <label style="display: block; margin-bottom: 10px;" wx:for-items="{
        {items}}">
          <checkbox value="{
        {item.name}}" checked="{
        {item.checked}}" />{
        {item.value}}
        </label>
      </checkbox-group>
    </view>

其中items变量和checkboxChange函数的代码如下：

Page({
      data: {
        items: [
          {name: 'shenyang', value: '沈阳',checked: 'true'},
          {name: 'beijing', value: '北京'},
          {name: 'hangzhou', value: '杭州'},
          {name: 'xian', value: '西安'},
          {name: 'wuhan', value: '武汉'},
          {name: 'shenzhen', value: '深圳'},
        ]
      },
      checkboxChange: function(e) {
        console.log('checkbox发生change事件，携带value值为：', e.detail.value)
      }
    })

运行后，可以选中前三个checkbox组件，效果如图2所示。

![format_png 1][]

图2  checkbox组件效果

当选中前三个checkbox组件后，会输出如图3所示的日志信息。

![format_png 2][]

图3 选中checkbox组件时输出的日志信息

3. 开关组件（switch）

switch组件用于设置二值切换，可以有两种风格，分别是iOS和Android风格，默认是iOS风格。该组件有如下3个属性。

*  checked：Boolean类型，默认值是false，表示默认是否选中switch组件
 *  type：String类型，默认值是switch，该属性值还可以是checkbox。其中，switch是iOS风格的开关组件，checkbox是Android风格的开关组件（也称为复选框组件）
 *  bindchange：EventHandle类型，checked改变时触发change事件（假设event为事件函数的参数），通过event.detail.value可以获得switch当前选中的状态（true或false）

下面的布局代码同时演示了iOS和Android风格的switch组件的效果，并使用label组件将一个文本和指定switch组件进行绑定。并且4个switch组件都和switchChange函数绑定，当checked变化时，switchChange函数会被调用。

<view style="flex-direction:column;display:flex">
      <label>
    <switch style="margin:20px;" checked="{
        {switch1Checked}}"        
              bindchange="switchChange"/>
        <text>Switch1</text>
      </label>
      <label>
    <switch style="margin:20px;" checked="{
        {switch2Checked}}"
    bindchange="switchChange" />
        Switch2
      </label>
      <label>
    <switch style="margin:20px;" checked="{
        {switch1Checked}}" bindchange="switchChange"
             type="checkbox" />
    Checkbox
      </label>
      <label>
    <switch style="margin:20px;" checked="{
        {switch2Checked}}" bindchange="switchChange"
             type="checkbox" />
    Checkbox
      </label> 
    </view>

布局的显示效果如图4所示。

![format_png 3][]

图4  switch组件的两种风格演示

完整的JavaScript实现代码如下：

var pageData = {
      data: {
        switch1Checked: true,
        switch2Checked: false,
      }
      ,
      switchChange:function (e)
    {
        console.log(e.detail.value);
      }
    }
    Page(pageData)

当点击switch组件时，会在Console中输入如图5所示的日志信息。如果经测试发现，尽管点击switch组件后的文本可以触发switch组件，但却无法触发change事件，这可能是一个bug，估计以后版本会有所改进。

![format_png 4][]

图5  选择switch组件时输出的日志信息

往期回顾：

[微信小程序开发实战（6）：基础组件（text、icon和progress）][6_text_icon_progress]

[微信小程序开发实战（7）：Button组件详解][7_Button]

[微信小程序开发实战（8）：可与其他组件绑定的文本组件（label）][8_label]

[微信小程序开发实战（9）：单行输入和多行输入组件][9]

\-----------支持作者请转发本文-----------

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

![format_png 5][]

关注  极客起源  公众号，获得更多免费技术视频和文章。

![format_png 6][]

[format_png]: /images/20230209/858e8bbc796b4e70b9609b6727d1395b.png
[format_png 1]: /images/20230209/c6f7e0286e80461eb4f64d39dd3d22f8.png
[format_png 2]: /images/20230209/7143cdd10bf94679903ecf9ac90bc3c4.png
[format_png 3]: /images/20230209/487712653ec84b308c3adebe201ff9d7.png
[format_png 4]: /images/20230209/67d58e018ba54be695a299f90368700b.png
[6_text_icon_progress]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd6903018a1e8a1759f9e327f56247d374513bcca93b53affca96ffc2f60da2513a1aca76a32&idx=1&mid=2651364855&scene=21&sn=1633e82e25441596c052eee6f4b0501c#wechat_redirect
[7_Button]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd6900f58a1e89e3786e06e5b9b532ba016f954e69f2dbf2b97ae82b9e8875a403713992e46a&idx=1&mid=2651364867&scene=21&sn=3cfb4e9162c17abd266f52a01d725c3e#wechat_redirect
[8_label]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd6900f98a1e89ef77c46cf54062f1e1626625522e70cc7b295a91bad1d6c9d308361b464e34&idx=1&mid=2651364879&scene=21&sn=f8ea1a5c07146ace992c44730376ee1f#wechat_redirect
[9]: https://blog.csdn.net/nokiaguy/article/details/107344323
[format_png 5]: /images/20230209/1f08dc33468343deb92301987d4cc665.png
[format_png 6]: /images/20230209/b412bb72e9f74a848e6900a4c96b3576.png