WeChat 애플릿 구성 요소 라벨 해석 및 분석 예

label label 구성요소 설명:

label label. 기본적으로 html의 label label과 동일합니다. label 요소는 사용자에게 특별한 효과를 제공하지 않습니다. 그러나 마우스 사용자의 유용성은 향상됩니다. 이 컨트롤은 레이블 요소 내부의 텍스트를 클릭하면 트리거됩니다. 즉, 사용자가 레이블을 선택하면 자동으로 레이블에 바인딩된 양식 컨트롤로 포커스가 이동하며 이는 주로 양식 구성 요소의 사용성을 향상시키는 데 사용됩니다.
for 속성을 사용하여 해당 ID를 찾거나 라벨 아래에 컨트롤을 배치하면 해당 컨트롤이 실행됩니다.
내부 컨트롤보다 우선순위가 높습니다. 내부 컨트롤이 여러 개인 경우 기본적으로 첫 번째 컨트롤이 트리거됩니다.
현재 바인딩할 수 있는 컨트롤은 다음과 같습니다: , , ,

구성요소 사용의 효과 예제 코드는 다음과 같습니다.

WXML 코드는 다음과 같습니다.

<view>
  <text>-------label绑定checkbox(内嵌)-------</text>
  <checkbox-group>
    <view>
      <label>
        <checkbox></checkbox>
        <view>
          <view></view>
        </view>
        <text>{{item.value}}</text>
      </label>
    </view>
  </checkbox-group>
</view>
<view>
  <text>---------label绑定radio(for)---------</text>
  <radio-group>
    <view>
      <radio></radio>
      <view>
        <view></view>
      </view>
      <label><text>{{item.name}}</text></label>
    </view>
  </radio-group>
</view>
<view>
  <text>-----------label绑定button-----------</text>
  <label>label绑定button(for)</label>
  <button>Fly-1</button>
  <label>
    <text>label绑定button(内嵌)</text>
    <button>Fly-2</button>
  </label>
</view>
<view>
  <text>-----------label绑定switch-----------</text>
  <view>
    <label>label绑定switch( for)</label>
    <switch></switch>
  </view>
  <view>
    <label>
      <text>label绑定switch(内嵌)</text>
      <switch></switch>
    </label>
  </view>
    <view>
    <label>
      <text>label绑定switch(内嵌)</text>
      <switch></switch>
      <switch></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 <p style="text-align: left;"> 그 안의 WXSS 코드는 다음과 같습니다</p> <p style="text-align: left;"></p><pre class="brush:php;toolbar:false">.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一模一样才生效)

속성

유형

유형

for

String

바운드 컨트롤의 ID(ID는 정확히 동일한 경우에만 적용됩니다. 바인딩해야 하는 양식 컨트롤의 ID)

위 내용은 WeChat 애플릿 구성 요소 라벨 해석 및 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!