微信小程序组件解读和分析：十五、switch 开关选择器

switch 开关选择器组件说明:

switch，开关选择器。只能选择或者不选。这种属于表单控件或者查询条件控件。

switch 开关选择器示例代码运行效果如下：
 

下面是WXML代码：

[XML]  纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

< view class = "section section" >    < text class = "title" >switch style</ text >    < view class = "body-view" >      < switch checked bindchange = "switch1Change" />    </ view > </ view > < view class = "section section" >    < text class = "title" >switch style</ text >    < view class = "body-view" >      < switch bindchange = "switch2Change" />    </ view > </ view > < view class = "section section" >    < text class = "title" >checkbox style</ text >    < view class = "body-view" >      < switch type = "checkbox" checked bindchange = "switch1Change" />    </ view > </ view > < view class = "section section" >    < text class = "title" >checkbox style</ text >    < view class = "body-view" >      < switch type = "checkbox" bindchange = "switch2Change" />    </ view > </ view > < view class = "section section" >    < text class = "title" >西游记里都有谁</ text >    < view class = "body-view" >      < switch type = "checkbox" checked bindchange = "switch2Change" />< text class = "title" >牛魔王</ text >    </ view >    < view class = "body-view" >      < switch type = "checkbox" checked bindchange = "switch2Change" />< text class = "title" >孙悟空</ text >    </ view >     < view class = "body-view" >      < switch type = "checkbox" checked bindchange = "switch2Change" />< text class = "title" >猪八戒</ text >    </ view >    < view class = "body-view" >      < switch type = "checkbox"  bindchange = "switch2Change" />< text class = "title" >旗木卡卡西</ text >    </ view > </ view >

下面是JS代码：

[JavaScript]  纯文本查看 复制代码

?

1 2 3 4 5 6 7 8

Page({    switch1Change: function (e){      console.log( 'switch1 发生 change 事件，携带值为' , e.detail.value)    },    switch2Change: function (e){      console.log( 'switch2 发生 change 事件，携带值为' , e.detail.value)    } })

下面是WXSS代码：

[CSS]  纯文本查看 复制代码

?

1 2 3 4 5 6 7

.page {      min-height : 100% ;      flex: 1 ;      background-color : #FBF9FE ;      font-size : 32 rpx;      overflow : hidden ; }

switch 开关选择器的主要属性

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

个人经验:适用于选择一单项选择true和false，不建议用checkbox样式

这个适用于选择一单项选择true和false，不建议使用checkbox样式。因为checkbox控件已经有了。而且，这种用checkbox样式时，没有带后面的文本，图片上文本是我拼凑的，还没有加控制事件（不应该这么用）

点击查看原文

转载于:https://www.cnblogs.com/johnchai/p/6637578.html