微信小程序组件解读和分析：十五、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: 32rpx;     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样式时，没有带后面的文本，图片上文本是我拼凑的，还没有加控制事件（不应该这么用）

点击查看原文