switch 开关选择器

解释:开关选择器

属性说明

属性名类型默认值必填说明
checkedBooleanfalse是否选中
typeStringswitch样式,有效值:switch,checkbox
colorColor#3388ffswitch 的颜色,同 CSS 的 color
disabledBooleanfalse是否禁用
bindchangeEventHandlechecked 改变时触发 change 事件,event.detail={ checked:true}

type 有效值

说明
switch切换样式
checkbox复选框样式

示例

在开发者工具中预览效果

扫码体验

switch 开关选择器 - 图1请使用百度APP扫码

代码示例1 - 默认样式

在开发者工具中预览效果

  1. <view class="card-area">
  2. <view class="top-description border-bottom">默认样式</view>
  3. <switch class="init-switch" checked disabled="false"></switch>
  4. <text class="switch-text">已开启</text>
  5. <switch class="init-switch-after"></switch>
  6. <text class="switch-text">已关闭</text>
  7. </view>

代码示例2 - 列表展示

  1. <view class="card-area">
  2. <view class="top-description border-bottom">列表展示</view>
  3. <view class="item-scroll border-bottom">
  4. <text class="switch-text switch-text-before">已开启</text>
  5. <switch class="init-switch" checked disabled="false"></switch>
  6. </view>
  7. <view class="item-scroll">
  8. <text class="switch-text switch-text-before">已关闭</text>
  9. <switch class="init-switch"></switch>
  10. </view>
  11. </view>

代码示例3 - 包含禁用选项

  1. <view class="card-area">
  2. <view class="top-description border-bottom">
  3. <view>包含禁用选项</view>
  4. <view>disabled</view>
  5. </view>
  6. <view class="item-scroll border-bottom">
  7. <text class="switch-text switch-text-before">已开启</text>
  8. <switch class="init-switch" checked color="#C3D1FF" disabled></switch>
  9. </view>
  10. <view class="item-scroll">
  11. <text class="switch-text switch-text-before">已关闭</text>
  12. <switch class="init-switch" disabled></switch>
  13. </view>
  14. </view>

代码示例4 - 自定义颜色

  1. <view class="card-area">
  2. <view class="top-description border-bottom">
  3. <view>自定义颜色</view>
  4. <view>color="#00BC89"</view>
  5. </view>
  6. <view class="item-scroll border-bottom">
  7. <text class="switch-text switch-text-before">已开启</text>
  8. <switch class="init-switch" checked color="#00BC89"></switch>
  9. </view>
  10. <view class="item-scroll">
  11. <text class="switch-text switch-text-before">已关闭</text>
  12. <switch class="init-switch" color="#00BC89"></switch>
  13. </view>
  14. </view>

代码示例5 type='switch'/ type='checkbox'的对比

在开发者工具中预览效果

  1. <view class="wrap">
  2. <switch class="init-switch" type="switch" checked disabled="false"></switch>
  3. <switch class="init-switch" type="checkbox"></switch>
  4. </view>

Bug & Tip

Tip:switch 类型切换时在 IOS 自带振动反馈,可在系统设置 -声音与触感 -系统触感反馈中关闭。