switch

开关选择器。

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

示例代码：

<!--pages/component/pages/switch/switch.mcml-->
<view class="container">
  <view class="statement">开关选择按钮。</view>
  <view class="cssname">checked</view>
  <view>
    <switch checked="true"></switch>
    <switch></switch>
  </view>
  <view class="cssname">disabled</view>
  <view>
    <switch disabled="true" checked="true"></switch>
    <switch disabled="true"></switch>
  </view>
  <view class="cssname">type</view>
  <view>
    <switch type="switch" checked="true"></switch>
    <switch type="checkbox"></switch>
  </view>
  <view class="cssname">color</view>
  <view>
    <switch color="red" value="red" bindchange="bindchange" checked="true"></switch>
    <switch color="blue" bindchange="bindchange" checked="true"></switch>
  </view>
  <view class="cssname">bindchange：checked 改变时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindchange}}</text>
</view>

// pages/component/pages/switch/switch.js
Page({
  bindchange: function (e) {
    this.setData({
      bindchange: JSON.stringify(e, null, 2)
    })
  }
})

Keyboard shortcuts

开发文档

switch