微信小程序開發(fā)之小程序組件label標(biāo)簽解讀以及分析實(shí)例
label標(biāo)簽組件說(shuō)明:
label標(biāo)簽，與html的label標(biāo)簽基本一樣。label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說(shuō)，當(dāng)用戶選擇該標(biāo)簽時(shí)，就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽綁定的表單控件上，主要用來(lái)改進(jìn)表單組件的可用性。
使用for屬性找到對(duì)應(yīng)的id，或者將控件放在該標(biāo)簽下，當(dāng)點(diǎn)擊時(shí)，就會(huì)觸發(fā)對(duì)應(yīng)的控件。
for優(yōu)先級(jí)高于內(nèi)部控件，內(nèi)部有多個(gè)控件的時(shí)候默認(rèn)觸發(fā)第一個(gè)控件。
目前可以綁定的控件有：<button/>, <checkbox/>, <radio/>, <switch/>
組件用法示例代碼的效果如下：
其中的WXML代碼：
<view class="content">
<text class="section__title">-------label綁定checkbox(內(nèi)嵌)-------</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(內(nèi)嵌)</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(內(nèi)嵌)</text>
<switch/>
</label>
</view>
<view>
<label>
<text>label綁定switch(內(nèi)嵌)</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][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可以綁定成功啦！?。?quot;); }, testLabelBindButton_2:function(){ console.log("奔走相告，button通過內(nèi)嵌可以綁定成功啦?。。?quot;); } }) |
其中的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; } |
主要屬性：
|
屬性 |
類型 |
類型 |
| for | String | 綁定控件的 id(該id和需要被綁定的表單控件的id一模一樣才生效) |
以上就是微信小程序組件label標(biāo)簽解讀和分析實(shí)例的詳細(xì)內(nèi)容。
