switch 开关选择器

解释：开关选择器

属性说明

属性名类型默认值必填说明
checkedBooleanfalse否是否选中
typeStringswitch否样式，有效值：switch,checkbox
colorColor#3388ff否switch 的颜色，同 CSS 的 color
disabledBooleanfalse否是否禁用
bindchangeEventHandle否checked 改变时触发 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 自带振动反馈，可在系统设置 -声音与触感 -系统触感反馈中关闭。