• switch 开关选择器
  • 属性说明
    • type 有效值
  • 示例
    • 代码示例 1：默认样式
    • 代码示例 2：设置 checkbox 样式
    • 代码示例 3：列表展示
    • 代码示例 4：包含禁用选项
    • 代码示例 5：自定义颜色
  • Bug & Tip

switch 开关选择器

解释：开关选择器。

属性说明

type 有效值

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：默认样式

• SWAN
• JS

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description border-bottom">默认样式</view>
  
  
  
 <switch class="init-switch" checked="true" bindchange="switchChange"></switch>
  
  
  
 <text class="switch-text">已开启</text>
  
  
  
 <switch class="init-switch-after" checked="false" bindchange="switchChange"></switch>
  
  
  
 <text class="switch-text">已关闭</text>
  
  
  
 </view>
  
  
  
</view>
 
 
 

代码示例 2：设置 checkbox 样式

• SWAN

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description border-bottom">设置checkbox样式</view>
  
  
  
 <switch class="init-switch" type="checkbox" checked></switch>
  
  
  
 <text class="switch-text">已开启</text>
  
  
  
 <switch class="init-switch-after" type="checkbox"></switch>
  
  
  
 <text class="switch-text">已关闭</text>
  
  
  
 </view>
  
  
  
</view>
 
 
 

代码示例 3：列表展示

• SWAN

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description border-bottom">列表展示</view>
  
  
  
 <view class="item-scroll block border-bottom">
  
  
  
 <text class="switch-text">已开启</text>
  
  
  
 <switch checked></switch>
  
  
  
 </view>
  
  
  

  
  
  
 <view class="item-scroll block">
  
  
  
 <text class="switch-text">已关闭</text>
  
  
  
 <switch></switch>
  
  
  
 </view>
  
  
  
 </view>
  
  
  
</view>
 
 
 

代码示例 4：包含禁用选项

• SWAN

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description border-bottom">
  
  
  
 <view>包含禁用选项</view>
  
  
  
 <view>disabled</view>
  
  
  
 </view>
  
  
  
 <view class="item-scroll border-bottom block">
  
  
  
 <text class="switch-text">已开启</text>
  
  
  
 <switch checked color="#C3D1FF" disabled></switch>
  
  
  
 </view>
  
  
  
 <view class="item-scroll block">
  
  
  
 <text class="switch-text">已关闭</text>
  
  
  
 <switch disabled></switch> 
  
  
  
 </view>
  
  
  
 </view>
  
  
  
</view>
 
 
 

代码示例 5：自定义颜色

• SWAN

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description border-bottom">
  
  
  
 <view>自定义颜色</view>
  
  
  
 <view>color="#00BC89"</view>
  
  
  
 </view>
  
  
  
 <view class="item-scroll border-bottom block">
  
  
  
 <text class="switch-text">已开启</text>
  
  
  
 <switch checked color="#00BC89"></switch>
  
  
  
 </view>
  
  
  
 <view class="item-scroll block">
  
  
  
 <text class="switch-text">已关闭</text>
  
  
  
 <switch color="#00BC89"></switch> 
  
  
  
 </view>
  
  
  
 </view>
  
  
  
</view>
 
 
 

Bug & Tip

• Tip：switch 类型切换时在 iOS 自带振动反馈，可在“系统设置 -> 声音与触感 -> 系统触感反馈”中关闭。