label label 구성요소 설명:
label label. 기본적으로 html의 label label과 동일합니다. label 요소는 사용자에게 특별한 효과를 제공하지 않습니다. 그러나 마우스 사용자의 유용성은 향상됩니다. 이 컨트롤은 레이블 요소 내부의 텍스트를 클릭하면 트리거됩니다. 즉, 사용자가 레이블을 선택하면 자동으로 레이블에 바인딩된 양식 컨트롤로 포커스가 이동하며 이는 주로 양식 구성 요소의 사용성을 향상시키는 데 사용됩니다.
for 속성을 사용하여 해당 ID를 찾거나 라벨 아래에 컨트롤을 배치하면 해당 컨트롤이 실행됩니다.
내부 컨트롤보다 우선순위가 높습니다. 내부 컨트롤이 여러 개인 경우 기본적으로 첫 번째 컨트롤이 트리거됩니다.
현재 바인딩할 수 있는 컨트롤은 다음과 같습니다: ,
구성요소 사용의 효과 예제 코드는 다음과 같습니다.
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) |
위 내용은 WeChat 애플릿 구성 요소 라벨 해석 및 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!