label標簽組件說明:
label標簽,與html的label標簽基本一樣。label 元素不會向用戶呈現任何特殊效果。不過,它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本,就會觸發(fā)此控件。就是說,當用戶選擇該標簽時,就會自動將焦點轉到和標簽綁定的表單控件上,主要用來改進表單組件的可用性。
使用for屬性找到對應的id,或者將控件放在該標簽下,當點擊時,就會觸發(fā)對應的控件。
for優(yōu)先級高于內部控件,內部有多個控件的時候默認觸發(fā)第一個控件。
目前可以綁定的控件有:<button/>, <checkbox/>, <radio/>, <switch/>
組件用法示例代碼的效果如下:
其中的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][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可以綁定成功啦!!!"); }, 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; } |
主要屬性:
屬性 |
類型 |
類型 |
for | String | 綁定控件的 id(該id和需要被綁定的表單控件的id一模一樣才生效) |
以上就是微信小程序組件label標簽解讀和分析實例的詳細內容。