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樣式時，沒有帶后面的文本，圖片上文本是我拼湊的，還沒有加控制事件（不應該這么用）