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

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	复选框样式

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：默认样式

• SWAN
• JS

 
 
 

  
  
  
  
  
  
 
  
  
  
 默认样式
  
  
  
 
  
  
  
 已开启
  
  
  
 
  
  
  
 已关闭
  
  
  
 
  
  
  
 
 
 

代码示例 2：设置 checkbox 样式

• SWAN

 
 
 

  
  
  
  
  
  
 
  
  
  
 设置checkbox样式
  
  
  
 
  
  
  
 已开启
  
  
  
 
  
  
  
 已关闭
  
  
  
 
  
  
  
 
 
 

代码示例 3：列表展示

• SWAN

 
 
 

  
  
  
  
  
  
 
  
  
  
 列表展示
  
  
  
 
  
  
  
 已开启
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 已关闭
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 
 

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

• SWAN

 
 
 

  
  
  
  
  
  
 
  
  
  
 
  
  
  
 包含禁用选项
  
  
  
 disabled
  
  
  
 
  
  
  
 
  
  
  
 已开启
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 已关闭
  
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 
 
 

代码示例 5：自定义颜色

• SWAN

 
 
 

  
  
  
  
  
  
 
  
  
  
 
  
  
  
 自定义颜色
  
  
  
 color="#00BC89"
  
  
  
 
  
  
  
 
  
  
  
 已开启
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 已关闭
  
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 
 
 

Bug & Tip

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

网页题目：创新互联百度小程序教程：switch开关选择器
本文链接：http://www.jxjierui.cn/article/dhdjose.html