微信小程序怎么实现switch组件-创新互联

这篇文章主要讲解了“微信小程序怎么实现switch组件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序怎么实现switch组件”吧!

我们提供的服务有:成都网站设计、成都网站建设、微信公众号开发、网站优化、网站认证、沾化ssl等。为近千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的沾化网站制作公司

实现效果图:

微信小程序怎么实现switch组件

开关选择器

属性名类型默认值说明
checkedBooleanfalse是否选中
disabledBooleanfalse是否禁用
typeStringswitch样式,有效值:switch, checkbox
bindchangeEventHandle
checked改变时触发change事件,event.detail={ value:checked}

示例代码:


 type="switch"
 
 
 



 type="checkbox"
 
 
 
var pageData = {
 data: {
 switch2Checked: true,
 switch3Checked: false,
 switch2Style: '',
 switch3Style: '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)

感谢各位的阅读,以上就是“微信小程序怎么实现switch组件”的内容了,经过本文的学习后,相信大家对微信小程序怎么实现switch组件这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联网站建设公司,,小编将为大家推送更多相关知识点的文章,欢迎关注!


分享题目:微信小程序怎么实现switch组件-创新互联
本文网址:http://myzitong.com/article/disdid.html