微信小程序官方组件展示之表单组件label源码

以下将展示微信小程序之表单组件label源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。

功能描述：

用来改进表单组件的可用性。

使用 for 属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。目前可以绑定的控件有：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内</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内有多个时选中第一个</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;

}

原文链接地址：https://developers.weixin.qq.com/miniprogram/dev/component/label.html

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。