以下将展示微信小程序之表单组件switch源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。
功能描述：
开关选择器。
属性说明：
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
checked | boolean | FALSE | 否 | 是否选中 | 1.0.0 |
disabled | boolean | FALSE | 否 | 是否禁用 | 1.0.0 |
type | string | switch | 否 | 样式，有效值：switch, checkbox | 1.0.0 |
color | string | #04BE02 | 否 | switch 的颜色，同 css 的 color | 1.0.0 |
bindchange | eventhandle | 否 | 点击导致 checked 改变时会触发 change 事件，event.detail={ value} | 1.0.0 |
示例代码
JAVASCRIPT：
代码语言：javascript复制var pageData = {
data: {
switch1Checked: true,
switch2Checked: false,
switch1Style: '',
switch2Style: 'text-decoration: line-through'
}
}
for (var i = 1; i <= 2; i) {
(function (index) {
pageData[`switch${index}Change`] = function (e) {
console.log(`switch${index}发生change事件，携带值为`, e.detail.value)
var obj = {}
obj[`switch${index}Checked`] = e.detail.value
this.setData(obj)
obj = {}
obj[`switch${index}Style`] = e.detail.value ? '' : 'text-decoration: line-through'
this.setData(obj)
}
})(i)
}
Page(pageData)WXML：
代码语言：javascript复制<view class="page">
<view class="page__hd">
<text class="page__title">switch</text>
<text class="page__desc">开关</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<view class="section__title">type="switch"</view>
<view class="body-view">
<switch checked="{{switch1Checked}}" bindchange="switch1Change"/>
</view>
</view>
<view class="section section_gap">
<view class="section__title">type="checkbox"</view>
<view class="body-view">
<switch type="checkbox" checked="{{switch2Checked}}" bindchange="switch2Change"/>
</view>
</view>
</view>
</view>
版权声明： 本站所有内容均由互联网收集整理、上传，如涉及版权问题，请联系我们第一时间处理。
原文链接地址：https://developers.weixin.qq.com/miniprogram/dev/component/switch.html
