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

switch 開(kāi)關(guān)選擇器

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

屬性說(shuō)明

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

type 有效值

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

示例

跳轉(zhuǎn)編輯工具

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

在 WEB IDE 中打開(kāi)

掃碼體驗(yàn)

代碼示例

請(qǐng)使用百度APP掃碼

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

• SWAN
• JS

 
 
 

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

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

• SWAN

 
 
 

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

代碼示例 3：列表展示

• SWAN

 
 
 

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

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

• SWAN

 
 
 

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

代碼示例 5：自定義顏色

• SWAN

 
 
 

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

Bug & Tip

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

當(dāng)前文章：創(chuàng)新互聯(lián)百度小程序教程：switch開(kāi)關(guān)選擇器
URL標(biāo)題：http://www.dlmjj.cn/article/dhdjose.html