支付寶小程序擴展表單 開關·Am-switch

2020-09-18 11:22 更新

開關。具體用法和小程序框架中 switch 保持一致,在 switch 基礎上做了樣式的封裝。

說明:iOS 和安卓展現(xiàn)樣式有所差異。iOS 單選開關為圓形;安卓單選開關為方形。

掃碼體驗

示例代碼

  1. {
  2. "defaultTitle": "am-switch",
  3. "usingComponents": {
  4. "am-switch": "mini-ali-ui/es/am-switch/index"
  5. }
  6. }
  1. <view class="page">
  2. <view class="page-description">開關</view>
  3. <view class="page-section">
  4. <view class="page-section-demo switch-list">
  5. <view class="switch-item">
  6. <am-switch checked onChange="switch1Change"/>
  7. </view>
  8. <view class="switch-item">
  9. <am-switch color="red" checked />
  10. </view>
  11. </view>
  12. </view>
  13. </view>
  14. Page({
  15. switch1Change(e) {
  16. console.log('switch1 發(fā)生 change 事件,攜帶值為', e.detail.value);
  17. },
  18. });

屬性

屬性 類型 默認值 可選值 描述
name String - - 組件名字,用于表單提交獲取數(shù)據(jù)。
checked Boolean false false, true 當前是否選中,可用來設置默認選中。
disabled Boolean false false, true 是否禁用。
onChange (e: Object) => void - - change 事件觸發(fā)的回調(diào)函數(shù)。
color String - 同 CSS 色值 組件顏色。
controlled Boolean false false, true 是否為受控組件,為 true 時,checked 會完全受 setData 控制。
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號