支付宝小程序扩展表单 开关·Am-switch

2020-09-18 11:22 更新

开关。具体用法和小程序框架中 switch 保持一致,在 switch 基础上做了样式的封装。

说明:iOS 和安卓展现样式有所差异。iOS 单选开关为圆形;安卓单选开关为方形。

扫码体验

示例代码

{
 "defaultTitle": "am-switch",
 "usingComponents": {
   "am-switch": "mini-ali-ui/es/am-switch/index"
 }
}
<view class="page">
 <view class="page-description">开关</view>
 <view class="page-section">
   <view class="page-section-demo switch-list">
     <view class="switch-item">
       <am-switch checked onChange="switch1Change"/>
     </view>
     <view class="switch-item">
       <am-switch color="red" checked />
     </view>
   </view>
 </view>
</view>
Page({
 switch1Change(e) {
   console.log('switch1 发生 change 事件,携带值为', e.detail.value);
 },
});

属性

属性 类型 默认值 可选值 描述
name String - - 组件名字,用于表单提交获取数据。
checked Boolean false false, true 当前是否选中,可用来设置默认选中。
disabled Boolean false false, true 是否禁用。
onChange (e: Object) => void - - change 事件触发的回调函数。
color String - 同 CSS 色值 组件颜色。
controlled Boolean false false, true 是否为受控组件,为 true 时,checked 会完全受 setData 控制。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号