微信

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

云博小周宇2 Mins Read

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样式时，没有带后面的文本，图片上文本是我拼凑的，还没有加控制事件（不应该这么用）

点击查看原文