switch

开关选择器。

属性名类型默认值说明
checkedBooleanfalse是否选中
typeStringswitch样式，有效值：switch，checkbox
bindchangeEventHandlechecked改变时触发该事件，event.detail={value:checked}
colorColor#04BE02switch的颜色，同css的color

示例

  2. <view class="container">
  3.   <view class="page-body">
  4.     <view class="page-section page-section-gap">
  5.       <view class="page-section-title">默认样式</view>
  6.       <view class="body-view">
  7.         <switch checked bindchange="switch1Change"/>
  8.         <switch bindchange="switch2Change"/>
  9.       </view>
  10.     </view>
  12.     <view class="page-section">
  13.       <view class="page-section-title">推荐展示样式</view>
  14.       <view class="page-cells page-cells_after-title">
  15.         <view class="page-cell page-cell_switch">
  16.           <view class="page-cell__bd">开启中</view>
  17.           <view class="page-cell__ft">
  18.             <switch checked color="#ff6633"/>
  19.           </view>
  20.         </view>
  21.         <view class="page-cell page-cell_switch">
  22.           <view class="page-cell__bd">关闭</view>
  23.           <view class="page-cell__ft">
  24.             <switch type="checkbox"/>
  25.           </view>
  26.         </view>
  27.       </view>
  28.     </view>
  29.   </view>
  31. </view>
  1. Page({
  2.   switch1Change: function (e){
  3.     console.log('switch1 发生 change 事件，携带值为', e.detail.value)
  4.   },
  5.   switch2Change: function (e){
  6.     console.log('switch2 发生 change 事件，携带值为', e.detail.value)
  7.   }
  8. })

switch - 图1

原文: https://developer.toutiao.com/docs/comp/switch.html