微信小程序 switch组件详解及简单实例
更新时间:2017年01月10日 15:14:15 投稿:lqh
这篇文章主要介绍了微信小程序 switch组件详解及简单实例 的相关资料,需要的朋友可以参考下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
微信小程序switch
相关文章:
实现效果图:
开关选择器
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
checked | Boolean | false | 是否选中 |
disabled | Boolean | false | 是否禁用 |
type | String | switch | 样式,有效值:switch, checkbox |
bindchange | EventHandle | checked改变时触发change事件,event.detail={ value:checked} |
示例代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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) |
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
相关文章
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
这篇文章主要介绍了微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据的相关资料,需要的朋友可以参考下2017-05-05JS中 querySelector 与 getElementById 方法区别
这篇文章主要介绍了JavaScript中 querySelector 与 getElementById 方法与区别,围绕querySelector 与 getElementById 的相关资料展开文章内容,需要的朋友可以参考一下2021-10-10
最新评论