欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

小程序极速实战开发《十一》label标签

发布：2018-01-25 16:34浏览： 次来源：网络 作者：tianshu

组件说明:

label标签，和html的label极其类似。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，就会自动将焦点转到和标签绑定的表单控件上，主要用来改进表单组件的可用性。
使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。
for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
目前可以绑定的控件有：<button/>, <checkbox/>, <radio/>, <switch/>

 

组件用法：

小程序极速实战开发《十一》label标签(图1)

 


wxml

 

  1. <view class="content">
  2.   <text class="section__title">-------label绑定checkbox(内嵌)-------</text>
  3.   <checkbox-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>
  15. <view class="content">
  16.   <text class="section__title">---------label绑定radio(for)---------</text>
  17.   <radio-group class="group" bindchange="radioChange">
  18.     <view class="label-2" wx:for="{{radioItems}}">
  19.       <radio id="{{item.name}}" hidden value="{{item.name}}" checked="{{item.checked}}"></radio>
  20.       <view class="label-2__icon">
  21.         <view class="label-2__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
  22.       </view>
  23.       <label class="label-2__text" for="{{item.name}}"><text>{{item.name}}</text></label>
  24.     </view>
  25.   </radio-group>
  26. </view>
  27. <view class="content">
  28.   <text class="section__title">-----------label绑定button-----------</text>
  29.   <label for="buttontest">label绑定button(for)</label>
  30.   <button id="buttontest" bindtap="testLabelBindButton_1">Fly-1</button>
  31.   <label>
  32.     <text>label绑定button(内嵌)</text>
  33.     <button bindtap="testLabelBindButton_2">Fly-2</button>
  34.   </label> 
  35. </view>
  36. <view class="content">
  37.   <text class="section__title">-----------label绑定switch-----------</text>
  38.   <view>
  39.     <label for="switchtest">label绑定switch( for)</label>
  40.     <switch id="switchtest" checked/> 
  41.   </view>
  42.   <view>
  43.     <label>
  44.       <text>label绑定switch(内嵌)</text>
  45.       <switch/>
  46.     </label>
  47.   </view>
  48.     <view>
  49.     <label>
  50.       <text>label绑定switch(内嵌)</text>
  51.       <switch/>
  52.       <switch/>
  53.       <switch/>
  54.     </label>
  55.   </view>
  56. </view>

js

  1. Page({
  2.   data: {
  3.     checkboxItems: [
  4.       {name: 'ctrip', value: '携程', checked: 'true'},
  5.       {name: 'qunar', value: '去哪儿'},
  6.       {name: 'tuniu', value: '途牛'}
  7.     ],
  8.     radioItems: [
  9.       {name: 'ctrip', value: '携程'},
  10.       {name: 'qunar', value: '去哪儿', checked: 'true'},
  11.       {name: 'tuniu', value: '途牛'}
  12.     ],
  13.     hidden: false
  14.   },
  15.   checkboxChange: function(e) {
  16.     var checked = e.detail.value
  17.     var changed = {}
  18.     for (var i = 0; i < this.data.checkboxItems.length; i ++) {
  19.       if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
  20.         changed['checkboxItems['+i+'].checked'] = true
  21.       } else {
  22.         changed['checkboxItems['+i+'].checked'] = false
  23.       }
  24.     }
  25.     this.setData(changed)
  26.   },
  27.   radioChange: function(e) {
  28.     var checked = e.detail.value
  29.     var changed = {}
  30.     for (var i = 0; i < this.data.radioItems.length; i ++) {
  31.       if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
  32.         changed['radioItems['+i+'].checked'] = true
  33.       } else {
  34.         changed['radioItems['+i+'].checked'] = false
  35.       }
  36.     }
  37.     this.setData(changed)
  38.   },
  39.   testLabelBindButton_1:function(){
  40.     console.log("奔走相告，button通过for可以绑定成功啦！！！");
  41.   },
  42.   testLabelBindButton_2:function(){
  43.     console.log("奔走相告，button通过内嵌可以绑定成功啦！！！");
  44.   }
  45. })
  46.  

wxss

  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. }
  8. .label-1__icon {
  9.     position: relative;
  10.     margin-right: 10px;
  11.     display: inline-block;
  12.     vertical-align: middle;
  13.     width: 18px;
  14.     height: 18px;
  15.     background: #CAE1FF;
  16. }
  17. .label-1__icon-checked {
  18.     position: absolute;
  19.     top: 3px;
  20.     left: 3px;
  21.     width: 12px;
  22.     height: 12px;
  23.     background: #1aad19;
  24. }
  25. .label-2__icon {
  26.     position: relative;
  27.     display: inline-block;
  28.     vertical-align: middle;
  29.     margin-right: 10px;
  30.     width: 18px;
  31.     height: 18px;
  32.     background: #CAFF70;
  33.     border-radius: 50px;
  34. }
  35. .label-2__icon-checked {
  36.     position: absolute;
  37.     left: 3px;
  38.     top: 3px;
  39.     width: 12px;
  40.     height: 12px;
  41.     background: #1aad19;
  42.     border-radius: 50%;
  43. }
  44. .section__title{
  45.   display: block;
  46.   text-align: center;
  47.   color: #9400D3;
  48. }
  49. .content{
  50.   padding-bottom: 15px;
  51. }

主要属性：

属性
类型
类型
for String 绑定控件的 id(该id和需要被绑定的表单控件的id一模一样才生效)





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有