微信小程序组件解读和分析：十一、label标签

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一模一样才生效)

posted on 2017-03-28 22:53  微信开发--51小程序  阅读(3572)  评论(0)    收藏  举报

导航