微信小程序 switch组件详解及简单实例

ttx9n

这篇文章主要介绍了微信小程序 switch组件详解及简单实例 的相关资料,需要的朋友可以参考下

微信小程序switch

相关文章：

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现效果图：

开关选择器

属性名	类型	默认值	说明
checked	Boolean	false	是否选中
disabled	Boolean	false	是否禁用
type	String	switch	样式，有效值：switch, checkbox
bindchange	EventHandle		checked改变时触发change事件，event.detail={ value:checked}

示例代码：

<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>

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)

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

Anthonylam

看看怎么样再说

4r8oiin60

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

醉梦娱乐网

谢谢下载来看看

溪谷玉贤

哦哦哦哦哦哦哦哦哦

3pjdk29w

dfdsafdsfdsfdsf

溪谷小兵

笑纳了老板

wqpa63gz

天天源码社区论坛

zzhxxx

了乐趣了去了去了去了去了

sykzus

人都不在了啊 啊