Represents a switch.
Since: 1.0.0
Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
checked | boolean | false | No | Selected or not. |
disabled | boolean | false | No | Disabled or not. |
type | string | switch | No | Style. Valid values: switch and checkbox. |
color | string | #0A59F7 | No | Color of the switch component, which follows the CSS color property. |
bindchange | eventhandle | - | No | Event handler triggered when checked changes upon tapping, with event.detail={ value}. |
HXML file:
<view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">Default style</view>
<view class="body-view">
<view class="page-section-title">Checked</view>
<switch checked bindchange="switch1Change" />
<view class="page-section-title">Unchecked</view>
<switch bindchange="switch2Change" />
<view class="page-section-title">Disabled when unchecked</view>
<switch disabled></switch>
<view class="page-section-title">Disabled when checked</view>
<switch checked disabled></switch>
</view>
</view>
<view class="page-section">
<view class="page-section-title">Recommended display style</view>
<view class="ascf-cells">
<view class="ascf-cell ascf-cell_switch">
<view class="ascf-cell__bd">Checked</view>
<view class="ascf-cell__ft">
<switch checked />
</view>
</view>
<view class="ascf-cell ascf-cell_switch">
<view class="ascf-cell__bd">Unchecked</view>
<view class="ascf-cell__ft">
<switch />
</view>
</view>
<view class="ascf-cell ascf-cell_switch">
<view class="ascf-cell__bd">Checked</view>
<view class="ascf-cell__ft">
<switch type="checkbox" checked />
</view>
</view>
<view class="ascf-cell ascf-cell_switch">
<view class="ascf-cell__bd">Unchecked</view>
<view class="ascf-cell__ft">
<switch type="checkbox" />
</view>
</view>
</view>
</view>
<view class="page-section">
<view class="page-section-title">Dynamic settings</view>
<view class="ascf-cells">
<view class="ascf-cell ascf-cell_switch">
<view class="ascf-cell__bd">{{isChecked?'Checked':'Unchecked'}}</view>
<view class="ascf-cell__ft">
<switch
checked="{{isChecked}}"
disabled="{{isDisabled}}"
type="{{setType}}"
color="{{setColor}}"
bindchange="bindchange"/>
</view>
</view>
</view>
</view>
<view style="margin-left: 30rpx; margin-top: 30rpx"
>bindchange event trigger: {{switchData}}</view>
<view style="flex-direction: row">
<button
size="mini"
type="primary"
style="margin-left: 30rpx"
bindtap="changeChecked">
{{isChecked?'Checked':'Unchecked'}}
</button>
<button
size="mini"
type="primary"
style="margin-left: 30rpx"
bindtap="changeDisabled">
{{isDisabled?'Enabled':'Disabled'}}
</button>
<button
size="mini"
type="primary"
style="margin-left: 30rpx"
bindtap="changeType">
{{isType?'switch':'checkbox'}}Style
</button>
<button
size="mini"
type="primary"
style="margin-left: 30rpx"
bindtap="changeColor">
{{!isColor?'Apply':'Cancel'}}Color
</button>
</view>
</view> JS file:
Page({
data:{
switchData:'',
isChecked:true,
isDisabled:false,
isType:true,
setType:'switch',
isColor:false,
setColor:'#04BE02'
},
switch1Change(e) {
console.log('A change event occurs in switch1. Carried value: ', e.detail.value)
},
switch2Change(e) {
console.log('A change event occurs in switch2. Carried value: ', e.detail.value)
},
switch3Change(e) {
console.log('A change event occurs in switch3. Carried value: ', e.detail.value)
},
switch4Change(e) {
console.log('A change event occurs in switch4. Carried value: ', e.detail.value)
},
bindchange(e){
this.setData({
switchData:e.detail.value
})
},
changeChecked(){
this.setData({
isChecked: !this.data.isChecked
})
},
changeDisabled(){
this.setData({
isDisabled: !this.data.isDisabled
})
},
changeType(){
this.setData({
setType: !this.data.isType ? 'switch' :'checkbox',
isType: !this.data.isType
})
},
changeColor() {
this.setData({
setColor: this.data.isColor ? '#04BE02' : 'red',
isColor: !this.data.isColor
})
}
})