label

用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有：<button/>, <checkbox/>, <radio/>, <switch/>。

属性名 类型 说明
for String 绑定控件的 id

示例代码：

在开发者工具中预览效果

  1. <view class="section section_gap">
  2. <view class="section__title">表单组件在label内</view>
  3. <checkbox-group class="group" bindchange="checkboxChange">
  4.   <view class="label-1" wx:for="{{checkboxItems}}">
  5.     <label>
  6.       <checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox>
  7.       <view class="label-1__icon">
  8.         <view class="label-1__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
  9.       </view>
  10.       <text class="label-1__text">{{item.value}}</text>
  11.     </label>
  12.   </view>
  13. </checkbox-group>
  14. </view>
  16. <view class="section section_gap">
  17. <view class="section__title">label用for标识表单组件</view>
  18. <radio-group class="group" bindchange="radioChange">
  19.   <view class="label-2" wx:for="{{radioItems}}">
  20.     <radio id="{{item.name}}" hidden value="{{item.name}}" checked="{{item.checked}}"></radio>
  21.     <view class="label-2__icon">
  22.       <view class="label-2__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
  23.     </view>
  24.     <label class="label-2__text" for="{{item.name}}"><text>{{item.name}}</text></label>
  25.   </view>
  26. </radio-group>
  27. </view>
  1. Page({
  2.   data: {
  3.     checkboxItems: [
  4.       {name: 'USA', value: '美国'},
  5.       {name: 'CHN', value: '中国', checked: 'true'},
  6.       {name: 'BRA', value: '巴西'},
  7.       {name: 'JPN', value: '日本', checked: 'true'},
  8.       {name: 'ENG', value: '英国'},
  9.       {name: 'TUR', value: '法国'},
  10.     ],
  11.     radioItems: [
  12.       {name: 'USA', value: '美国'},
  13.       {name: 'CHN', value: '中国', checked: 'true'},
  14.       {name: 'BRA', value: '巴西'},
  15.       {name: 'JPN', value: '日本'},
  16.       {name: 'ENG', value: '英国'},
  17.       {name: 'TUR', value: '法国'},
  18.     ],
  19.     hidden: false
  20.   },
  21.   checkboxChange: function(e) {
  22.     var checked = e.detail.value
  23.     var changed = {}
  24.     for (var i = 0; i < this.data.checkboxItems.length; i ++) {
  25.       if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
  26.         changed['checkboxItems['+i+'].checked'] = true
  27.       } else {
  28.         changed['checkboxItems['+i+'].checked'] = false
  29.       }
  30.     }
  31.     this.setData(changed)
  32.   },
  33.   radioChange: function(e) {
  34.     var checked = e.detail.value
  35.     var changed = {}
  36.     for (var i = 0; i < this.data.radioItems.length; i ++) {
  37.       if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
  38.         changed['radioItems['+i+'].checked'] = true
  39.       } else {
  40.         changed['radioItems['+i+'].checked'] = false
  41.       }
  42.     }
  43.     this.setData(changed)
  44.   }
  45. })
  1. .label-1, .label-2{
  2.     margin-bottom: 15px;
  3. }
  4. .label-1__text, .label-2__text {
  5.     display: inline-block;
  6.     vertical-align: middle;
  7. }
  9. .label-1__icon {
  10.     position: relative;
  11.     margin-right: 10px;
  12.     display: inline-block;
  13.     vertical-align: middle;
  14.     width: 18px;
  15.     height: 18px;
  16.     background: #fcfff4;
  17. }
  19. .label-1__icon-checked {
  20.     position: absolute;
  21.     top: 3px;
  22.     left: 3px;
  23.     width: 12px;
  24.     height: 12px;
  25.     background: #1aad19;
  26. }
  29. .label-2__icon {
  30.     position: relative;
  31.     display: inline-block;
  32.     vertical-align: middle;
  33.     margin-right: 10px;
  34.     width: 18px;
  35.     height: 18px;
  36.     background: #fcfff4;
  37.     border-radius: 50px;
  38. }
  40. .label-2__icon-checked {
  41.     position: absolute;
  42.     left: 3px;
  43.     top: 3px;
  44.     width: 12px;
  45.     height: 12px;
  46.     background: #1aad19;
  47.     border-radius: 50%;
  48. }
  50. .label-4_text{
  51.     text-align: center;
  52.     margin-top: 15px;
  53. }

label - 图1

原文:

https://developers.weixin.qq.com/miniprogram/dev/component/label.html