• switch 開關(guān)選擇器
  • 屬性說明
    • type 有效值
  • 示例
    • 代碼示例 1：默認(rèn)樣式
    • 代碼示例 2：設(shè)置 checkbox 樣式
    • 代碼示例 3：列表展示
    • 代碼示例 4：包含禁用選項(xiàng)
    • 代碼示例 5：自定義顏色
  • Bug & Tip

switch 開關(guān)選擇器

解釋：開關(guān)選擇器。

屬性說明

屬性名	類型	默認(rèn)值	必填	說明
checked	Boolean	false	否	是否選中
type	String	switch	否	樣式，有效值：switch、checkbox
color	Color	#3388ff	否	switch 的顏色，同 CSS 的 color
disabled	Boolean	false	否	是否禁用
bindchange	EventHandle		否	checked 改變時觸發(fā) change 事件，event.detail = {checked: true}

type 有效值

值	說明
switch	切換樣式
checkbox	復(fù)選框樣式

示例

跳轉(zhuǎn)編輯工具

在開發(fā)者工具中打開

在 WEB IDE 中打開

掃碼體驗(yàn)

代碼示例

請使用百度APP掃碼

代碼示例 1：默認(rèn)樣式

• SWAN
• JS

 
 
 

  
  
  
  
  
  
 
  
  
  
 默認(rèn)樣式
  
  
  
 
  
  
  
 已開啟
  
  
  
 
  
  
  
 已關(guān)閉
  
  
  
 
  
  
  
 
 
 

代碼示例 2：設(shè)置 checkbox 樣式

• SWAN

 
 
 

  
  
  
  
  
  
 
  
  
  
 設(shè)置checkbox樣式
  
  
  
 
  
  
  
 已開啟
  
  
  
 
  
  
  
 已關(guān)閉
  
  
  
 
  
  
  
 
 
 

代碼示例 3：列表展示

• SWAN

 
 
 

  
  
  
  
  
  
 
  
  
  
 列表展示
  
  
  
 
  
  
  
 已開啟
  
  
  
 
  
  
  
 
  
  
  
  
  
  
 
  
  
  
 已關(guān)閉
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 
 

代碼示例 4：包含禁用選項(xiàng)

• SWAN

 
 
 

  
  
  
  
  
  
 
  
  
  
 
  
  
  
 包含禁用選項(xiàng)
  
  
  
 disabled
  
  
  
 
  
  
  
 
  
  
  
 已開啟
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 已關(guān)閉
  
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 
 
 

代碼示例 5：自定義顏色

• SWAN

 
 
 

  
  
  
  
  
  
 
  
  
  
 
  
  
  
 自定義顏色
  
  
  
 color="#00BC89"
  
  
  
 
  
  
  
 
  
  
  
 已開啟
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 已關(guān)閉
  
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 
 
 

Bug & Tip

• Tip：switch 類型切換時在 iOS 自帶振動反饋，可在“系統(tǒng)設(shè)置 -> 聲音與觸感 -> 系統(tǒng)觸感反饋”中關(guān)閉。

標(biāo)題名稱：創(chuàng)新互聯(lián)百度小程序教程：switch開關(guān)選擇器
標(biāo)題網(wǎng)址：http://fisionsoft.com.cn/article/dhdjose.html