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

微信小程序 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}

示例代码：

http://type="switSxLcTXUjzch"

type="checkbox"

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)http://

obj = {}

obj[`switch${index}Style`] = e.detail.value ? '' : 'text-decoration: line-through'

this.setData(obj)

}

})(i)

}

Page(pageData)

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。