Ready

 今天给大家普及一下如何使用微信小程序的label标签?下面就一起去看一看，了解了解，相信可以帮助到大家的。

 组件说明:

  label标签，和html的label极其类似。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，就会自动将焦点转到和标签绑定的表单控件上，主要用来改进表单组件的可用性。

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

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

  目前可以绑定的控件有：, , ,

  组件用法：

  wxml

  

  -------label绑定checkbox(内嵌)-------

  

  

  

  

  

  

  

  {{item.value}}

  

  

  

  

  

  ---------label绑定radio(for)---------

  

  

  

  

  

  

  {{item.name}}

  

  

  

  

  -----------label绑定button-----------

  label绑定button(for)

  Fly-1

  

  label绑定button(内嵌)

  Fly-2

  

  

  

  -----------label绑定switch-----------

  

  label绑定switch( for)

  

  

  

  

  label绑定switch(内嵌)

  

  

  

  

  

  label绑定switch(内嵌)

  

  

  

  

  

  

  复制代码

  js

  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].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[i].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

  .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;

  }

  复制代码

 以上就是如何使用微信小程序的label标签?的全部内容了，大家都学会了吗?

End