微信小程序之switch开关选择器

switch开关选择器应用得十分普遍,它有两个状态:开或是关,在很多场景都会用到开关这个功能,如微信设置里的“新消息提醒”界面,通过开关来设置是否接受消息,显示消息,是否有声音,是否有震动等功能。

switch开关选择器的属性可以设置是否选中,开关类型,颜色以及绑定事件

属性名 类型 默认值 说明
checked Boolean false 是否选中
disabled Boolean false 是否禁用
type String switch 样式,有效值:switch, checkbox
bindchange EventHandle checked 改变时触发 change 事件, event.detail={ value:checked}
color Color switch 的颜色,同 css 的 color

wxml文件

<view class="body-view">
    <switch checked bindchange="switch1Change"/>
    <switch bindchange="switch2Change"/>
</view>

js文件

Page({
  switch1Change: function (e){
    console.log('switch1 发生 change 事件,携带值为', e.detail.value)
  },
  switch2Change: function (e){
    console.log('switch2 发生 change 事件,携带值为', e.detail.value)
  }
})

效果


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容