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

点击查看原文

最新文章

  1. python基础之函数
  2. 基于Struts2CRUD的质量属性
  3. Spring MVC错误页面配置
  4. hibernate基础的CRUD的操作
  5. Angular学习（1）
  6. linux下 cmatrix的安装和使用
  7. Bzoj-2005 能量采集 gcd,递推
  8. webpack ，react
  9. 在ubuntu上安装k-vim
  10. lua向文件中写入数据，进行记录
  11. Spring AOP实现 Bean字段合法性校验
  12. 微信小程序开发4之form表单与弹出层
  13. 【SQL】MaxComputer常用SQL与注意小结
  14. Redis学习---Redis操作之Python连接
  15. BZOJ 2424 订货 最小费用流
  16. jquery源码解析：val方法和valHooks对象详解
  17. 总结的一些json格式和对象/String/Map/List等的互转工具类
  18. drf序列化器serializers.SerializerMethodField()的用法
  19. Storm实战
  20. Android 中jar包封装及调用-转

热门文章

  1. hdoj-2090-算菜价(水题)
  2. [办公应用]如何在WORD中让英文网址可以在字符中间换行
  3. iOS开发——高级篇——iOS抽屉效果实现原理
  4. hashable
  5. W5500EVB UDP模式的測试与理解
  6. HDU - 1255 覆盖的面积（线段树求矩形面积交 扫描线+离散化）
  7. Database Firewall——mysql也是支持的
  8. mac下安装eclipse+CDT
  9. CollectionView缩放水平卡片布局
  10. 初识Spring Boot框架和快速入门