支付宝小程序扩展表单 开关·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 控制。 |
以上内容是否对您有帮助:
更多建议: