title: switch 开关选择器 header: develop nav: component sidebar: formlist_switch

webUrl: https://qft12m.smartapps.cn/component/switch/switch

解释：开关选择器

属性说明

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

type 有效值

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

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/switch/switch - 图1 请使用百度APP扫码

代码示例1 - 默认样式

在开发者工具中预览效果

:::codeTab

  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 - 列表展示

:::codeTab

  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 - 包含禁用选项

:::codeTab

  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 - 自定义颜色

:::codeTab

  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’的对比

在开发者工具中预览效果

:::codeTab

  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 自带振动反馈，可在系统设置 -声音与触感 -系统触感反馈中关闭。