switch顾名思义开关，在小程序中也就是一个选择器，状态分为选中和未选中，属性如下
- checked： 是否选中，默认值false
- disabled ：是否禁用，默认值false
- type ：样式，有效值：switch, checkbox 默认值switch
- colo ：switch 的颜色，同 css 的 color 默认值#04BE02
- bindchange ：checked 改变时触发 change 事件，event.detail={ value}
官方api传送门
看完了官方api小试牛刀一把:
<view class='container'>
<text class='title'>type:switch</text>
<view class='container_switch'>
<switch type='switch' checked='true' bindchange='type_switch'></switch>
<text>{{type_switch}}</text>
</view>
<text class='title'>type:checkbox</text>
<view class='container_switch'>
<switch type='checkbox' checked='true' bindchange='type_checkbox'></switch>
<text>{{type_checkbox}}</text>
</view>
</view>
//index.js
Page({
data: {
type_switch: "开",
type_checkbox:"开"
},
type_switch(e) {
var sw = e.detail.value
this.setData({
type_switch:e.detail.value?"开":"关"
})
},
type_checkbox(e){
var sw = e.detail.value
this.setData({
type_checkbox: e.detail.value ? "开" : "关"
})
}
})
显示结果：
9-1.png
9-2.png
