分享如何使用微信小程序的label标签。

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

 组件说明:

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

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

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

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

组件用法：

wxml

<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

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标签?的全部内容了，大家都学会了吗?