专栏首页极客起源微信小程序开发实战(10):单选、多选和开关组件

微信小程序开发实战(10):单选、多选和开关组件

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所示。

图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所示。

图2 checkbox组件效果

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

图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所示。

图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,估计以后版本会有所改进。

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

本文分享自微信公众号 - 极客起源(geekculture),作者:geekori

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序开发实战(8):可与其他组件绑定的文本组件(label)

    可能有很多读者认为label和text差不多,都是用来显示文本的。其实label和text一点都不像,label本身也不能显示任何文本,该组件只是与其他组件进行...

    蒙娜丽宁
  • Python编程思想(27):类的继承

    继承是面向对象的3大特征之一(另两个特性是封装和组合),也是实现软件复用的重要手段。Python的继承是多继承机制,也就是一个子类可以同时有多个直接父类。

    蒙娜丽宁
  • 把99%的程序员烤得外焦里嫩的JavaScript面试题

    最近有学员给出一段令人匪夷所思的JavaScript代码(据说是某某大厂面试题),废话少说,上代码:

    蒙娜丽宁
  • el-radio再次点击取消选中-更新版

    网上一直流传的2种方法,一种复选框方案需求不接受,二种@click.native.prevent不能取消选中,

    deepcc
  • 纯CSS制作一个评星组件(说出去都没人信)

    如果让你制作上面图的效果,你会怎么开发了?可以下发评论说说你的想法。今天就来看看纯CSS是如何实现这个效果的。

    Javanx
  • Springsecurity-oauth2之TokenEndPoint(2)

        当我们访问/oauth/token时,首先会经过BasicAuthenticationFilter,之后才会到TokenEndPoint

    克虏伯
  • C++ STL之priority_queue

        STL中的priority_queue(优先队列)是一种会按照自定义的一种方式(数据的优先级)来对队列中的数据进行动态的排序的容器,不同优先级的情况下,...

    用户1215536
  • 美国AI的秘密武器

    对于本科毕业的中国人才而言,美国是AI领域的技术沃土,许多的中国学者选择来美国深造和研究:

    新智元
  • 对舞台表演的认知还停留在灯光秀阶段?

    日前,Adobe在旧金山时尚中心Dogpatch区的《Minnesota Street Project》项目中,正式宣布启动AR技术作为艺术家们的新媒介。这让小...

    VRPinea
  • 人工智能再添新技能,这是要抢人类饭碗的节奏啊!

    镁客网

扫码关注云+社区

领取腾讯云代金券