switch
开关选择器。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
checked | Boolean | false | 否 | 是否选中 | |
disabled | Boolean | false | 否 | 是否禁用 | |
type | String | switch | 否 | 样式,有效值:switch, checkbox | |
color | String | #00cac4 | 否 | switch 的颜色,同 css 的 color | |
bindchange | EventHandle | 否 | checked 改变时触发 change 事件,event.detail={ value} |
示例代码:
<!--pages/component/pages/switch/switch.mcml-->
<view class="container">
<view class="statement">开关选择按钮。</view>
<view class="cssname">checked</view>
<view>
<switch checked="true"></switch>
<switch></switch>
</view>
<view class="cssname">disabled</view>
<view>
<switch disabled="true" checked="true"></switch>
<switch disabled="true"></switch>
</view>
<view class="cssname">type</view>
<view>
<switch type="switch" checked="true"></switch>
<switch type="checkbox"></switch>
</view>
<view class="cssname">color</view>
<view>
<switch color="red" value="red" bindchange="bindchange" checked="true"></switch>
<switch color="blue" bindchange="bindchange" checked="true"></switch>
</view>
<view class="cssname">bindchange:checked 改变时触发, 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{bindchange}}</text>
</view>
// pages/component/pages/switch/switch.js
Page({
bindchange: function (e) {
this.setData({
bindchange: JSON.stringify(e, null, 2)
})
}
})