以下將展示微信小程序之表單組件label源碼官方組件能力，組件樣式僅供參考，開發(fā)者可根據(jù)自身需求定義組件樣式，具體屬性參數(shù)詳見小程序開發(fā)文檔。
功能描述：
用來改進表單組件的可用性。
使用 for 屬性找到對應的id，或者將控件放在該標簽下，當點擊時，就會觸發(fā)對應的控件。 for優(yōu)先級高于內(nèi)部控件，內(nèi)部有多個控件的時候默認觸發(fā)第一個控件。 目前可以綁定的控件有：button, checkbox, radio, switch, input。
屬性說明：
示例代碼：
JAVASCRIPT：
Page({
? onShareAppMessage() {
? ? return {
? ? ? title: 'label',
? ? ? path: 'page/component/pages/label/label'
? ? }
? },
? data: {
? ? checkboxItems: [
? ? ? {name: 'USA', value: '美國'},
? ? ? {name: 'CHN', value: '中國', checked: 'true'}
? ? ],
? ? radioItems: [
? ? ? {name: 'USA', value: '美國'},
? ? ? {name: 'CHN', value: '中國', checked: 'true'}
? ? ],
? ? hidden: false
? },
? checkboxChange(e) {
? ? const checked = e.detail.value
? ? const changed = {}
? ? for (let 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(e) {
? ? const checked = e.detail.value
? ? const changed = {}
? ? for (let 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)
? },
? tapEvent() {
? ? console.log('按鈕被點擊')
? }
})
WXML：
<view class="container">
? <view class="page-body">
? ? <view class="page-section page-section-gap">
? ? ? <view class="page-section-title">表單組件在label內(nèi)</view>
? ? ? <checkbox-group class="group" bindchange="checkboxChange">
? ? ? ? <view class="label-1" wx:for="{{checkboxItems}}">
? ? ? ? ? <label>
? ? ? ? ? ? <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
? ? ? ? ? ? <text class="label-1-text">{{item.value}}</text>
? ? ? ? ? </label>
? ? ? ? </view>
? ? ? </checkbox-group>
? ? </view>
? ? <view class="page-section page-section-gap">
? ? ? <view class="page-section-title">label用for標識表單組件</view>
? ? ? <radio-group class="group" bindchange="radioChange">
? ? ? ? <view class="label-2" wx:for="{{radioItems}}">
? ? ? ? ? <radio id="{{item.name}}" value="{{item.name}}" checked="{{item.checked}}"></radio>
? ? ? ? ? <label class="label-2-text" for="{{item.name}}"><text>{{item.name}}</text></label>
? ? ? ? </view>
? ? ? </radio-group>
? ? </view>
? ? <view class="page-section page-section-gap">
? ? ? <view class="page-section-title">label內(nèi)有多個時選中第一個</view>
? ? ? <label class="label-3">
? ? ? ? <checkbox class="checkbox-3">選項一</checkbox>
? ? ? ? <checkbox class="checkbox-3">選項二</checkbox>
? ? ? ? <view class="label-3-text">點擊該label下的文字默認選中第一個checkbox</view>
? ? ? </label>
? ? </view>
? </view>
</view>
WXSS：
.label-1, .label-2{
? margin: 30rpx 0;
}
.label-3-text{
? color: #576B95;
? font-size: 28rpx;
}
.checkbox-3{
? display: block;
? margin: 30rpx 0;
}
版權(quán)聲明：本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理、上傳，如涉及版權(quán)問題，請聯(lián)系我們第一時間處理。
原文鏈接地址：https://developers.weixin.qq.com/miniprogram/dev/component/label.html
