以下将展示微信小程序之表单组件switch源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。
功能描述:
开关选择器。
属性说明:
示例代码
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:
<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