小程序开发之组件switch（开关选择器）

switch

开关选择器。

例如：
效果展示

代码
index.wxml

<!-- 
  checked:false   是否选中  
  disabled:false  是否禁用  
  type  switch样式，有效值：switch, checkbox   
  bindchange  checked 改变时触发 change 事件，event.detail={ value:checked}   
  color   switch 的颜色，同 css 的 color  
  aria-label  无障碍访问，（属性）元素的额外描述
 -->
<view class="contentView">
  <view class="switch_title">type="switch"</view>
  <switch checked="{{false}}" bindchange="switch1Change" />
  <switch checked="{{true}}" bindchange="switch2Change" />
</view>
<view class="contentView">
  <view class="switch_title">type="checkbox"</view>
  <switch type="checkbox" checked="{{true}}" bindchange="switch3Change"/>
</view>

index.wxss

.contentView{
  margin-left: 100rpx;
  margin-top: 100rpx;
  width: 100%;
}
.switch_title{
  width: 100%
}

index.js

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