label標簽組件說明:
label標簽，與html的label標簽基本一樣。label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，就會自動將焦點轉到和標簽綁定的表單控件上，主要用來改進表單組件的可用性。
使用for屬性找到對應的id，或者將控件放在該標簽下，當點擊時，就會觸發對應的控件。
for優先級高於內部控件，內部有多個控件的時候默認觸發第一個控件。
目前可以綁定的控件有：<button/>, <checkbox/>, <radio/>, <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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<
view
class
=
"content"
>
<
text
class
=
"section__title"
>-------label綁定checkbox(內嵌)-------</
text
>
<
checkbox-group
bindchange
=
"checkboxChange"
>
<
view
class
=
"label-1"
wx:for
=
"{{checkboxItems}}"
>
<
label
>
<
checkbox
hidden
value
=
"{{item.name}}"
checked
=
"{{item.checked}}"
></
checkbox
>
<
view
class
=
"label-1__icon"
>
<
view
class
=
"label-1__icon-checked"
style
=
"opacity:{{item.checked ? 1: 0}}"
></
view
>
</
view
>
<
text
class
=
"label-1__text"
>{{item.value}}</
text
>
</
label
>
</
view
>
</
checkbox-group
>
</
view
>
<
view
class
=
"content"
>
<
text
class
=
"section__title"
>---------label綁定radio(for)---------</
text
>
<
radio-group
class
=
"group"
bindchange
=
"radioChange"
>
<
view
class
=
"label-2"
wx:for
=
"{{radioItems}}"
>
<
radio
id
=
"{{item.name}}"
hidden
value
=
"{{item.name}}"
checked
=
"{{item.checked}}"
></
radio
>
<
view
class
=
"label-2__icon"
>
<
view
class
=
"label-2__icon-checked"
style
=
"opacity:{{item.checked ? 1: 0}}"
></
view
>
</
view
>
<
label
class
=
"label-2__text"
for
=
"{{item.name}}"
><
text
>{{item.name}}</
text
></
label
>
</
view
>
</
radio-group
>
</
view
>
<
view
class
=
"content"
>
<
text
class
=
"section__title"
>-----------label綁定button-----------</
text
>
<
label
for
=
"buttontest"
>label綁定button(for)</
label
>
<
button
id
=
"buttontest"
bindtap
=
"testLabelBindButton_1"
>Fly-1</
button
>
<
label
>
<
text
>label綁定button(內嵌)</
text
>
<
button
bindtap
=
"testLabelBindButton_2"
>Fly-2</
button
>
</
label
>
</
view
>
<
view
class
=
"content"
>
<
text
class
=
"section__title"
>-----------label綁定switch-----------</
text
>
<
view
>
<
label
for
=
"switchtest"
>label綁定switch( for)</
label
>
<
switch
id
=
"switchtest"
checked/>
</
view
>
<
view
>
<
label
>
<
text
>label綁定switch(內嵌)</
text
>
<
switch
/>
</
label
>
</
view
>
<
view
>
<
label
>
<
text
>label綁定switch(內嵌)</
text
>
<
switch
/>
<
switch
/>
<
switch
/>
</
label
>
</
view
>
</
view
>
|
其中的JS代碼如下：
[JavaScript]
純文本查看 復制代碼
|
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
40
41
42
43
44
45
|
Page({
data: {
checkboxItems: [
{name:
'ctrip'
, value:
'攜程'
, checked:
'true'
},
{name:
'qunar'
, value:
'去哪兒'
},
{name:
'tuniu'
, value:
'途牛'
}
],
radioItems: [
{name:
'ctrip'
, value:
'攜程'
},
{name:
'qunar'
, value:
'去哪兒'
, checked:
'true'
},
{name:
'tuniu'
, value:
'途牛'
}
],
hidden:
false
},
checkboxChange:
function
(e) {
var
checked = e.detail.value
var
changed = {}
for
(
var
i = 0; i <
this
.data.checkboxItems.length; i ++) {
if
(checked.indexOf(
this
.data.checkboxItems[i][i].name) !== -1) {
changed[
'checkboxItems['
+i+
'].checked'
] =
true
}
else
{
changed[
'checkboxItems['
+i+
'].checked'
] =
false
}
}
this
.setData(changed)
},
radioChange:
function
(e) {
var
checked = e.detail.value
var
changed = {}
for
(
var
i = 0; i <
this
.data.radioItems.length; i ++) {
if
(checked.indexOf(
this
.data.radioItems.name) !== -1) {
changed[
'radioItems['
+i+
'].checked'
] =
true
}
else
{
changed[
'radioItems['
+i+
'].checked'
] =
false
}
}
this
.setData(changed)
},
testLabelBindButton_1:
function
(){
console.log(
"奔走相告，button通過for可以綁定成功啦！！！"
);
},
testLabelBindButton_2:
function
(){
console.log(
"奔走相告，button通過內嵌可以綁定成功啦！！！"
);
}
})
|
其中的WXSS代碼如下
[CSS]
純文本查看 復制代碼
|
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
40
41
42
43
44
45
46
47
48
49
50
51
|
.label
-1
, .label
-2
{
margin-bottom
:
15px
;
}
.label
-1
__text, .label
-2
__text {
display
: inline-
block
;
vertical-align
:
middle
;
}
.label
-1
__icon {
position
:
relative
;
margin-right
:
10px
;
display
: inline-
block
;
vertical-align
:
middle
;
width
:
18px
;
height
:
18px
;
background
:
#CAE1FF
;
}
.label
-1
__icon-checked {
position
:
absolute
;
top
:
3px
;
left
:
3px
;
width
:
12px
;
height
:
12px
;
background
:
#1aad19
;
}
.label
-2
__icon {
position
:
relative
;
display
: inline-
block
;
vertical-align
:
middle
;
margin-right
:
10px
;
width
:
18px
;
height
:
18px
;
background
:
#CAFF70
;
border-radius:
50px
;
}
.label
-2
__icon-checked {
position
:
absolute
;
left
:
3px
;
top
:
3px
;
width
:
12px
;
height
:
12px
;
background
:
#1aad19
;
border-radius:
50%
;
}
.section__title{
display
:
block
;
text-align
:
center
;
color
:
#9400D3
;
}
.content{
padding-bottom
:
15px
;
}
|
主要屬性：
|
屬性
|
類型
|
類型
|
| for | String | 綁定控件的 id(該id和需要被綁定的表單控件的id一模一樣才生效) |