微信小程序 label 标签组件

水深无声 2021-09-08 01:14 468阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

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

使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：[button][], [checkbox][], [radio][], [switch][]。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">for</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">绑定控件的 id</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
 </tbody> 
</table>

**示例代码**

[在开发者工具中预览效果][Link 1]

index.wxml

<view class="section section_gap">
    <view class="section__title">表单组件在label内</view>
    <checkbox-group class="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="section section_gap">
    <view class="section__title">label用for标识表单组件</view>
    <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>

index.js

Page({ 
      data: { 
        checkboxItems: [
          {  name: 'USA', value: '美国' },
          {  name: 'CHN', value: '中国', checked: 'true' },
          {  name: 'BRA', value: '巴西' },
          {  name: 'JPN', value: '日本', checked: 'true' },
          {  name: 'ENG', value: '英国' },
          {  name: 'TUR', value: '法国' },
        ],
        radioItems: [
          {  name: 'USA', value: '美国' },
          {  name: 'CHN', value: '中国', checked: 'true' },
          {  name: 'BRA', value: '巴西' },
          {  name: 'JPN', value: '日本' },
          {  name: 'ENG', value: '英国' },
          {  name: 'TUR', value: '法国' },
        ],
        hidden: false
      },
      checkboxChange: function (e) { 
        var checked = e.detail.value
        console.log(checked)
        var changed = { }
        for (var 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: 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[i].name) !== -1) { 
            changed['radioItems[' + i + '].checked'] = true
          } else { 
            changed['radioItems[' + i + '].checked'] = false
          }
        }
        this.setData(changed)
      }
    })

运行效果：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kQBVm7Un-1622384672422)(image-20210529133612798.png)\]][img-kQBVm7Un-1622384672422_image-20210529133612798.png]

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[button]: https://developers.weixin.qq.com/miniprogram/dev/component/button.html
[checkbox]: https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
[radio]: https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
[switch]: https://developers.weixin.qq.com/miniprogram/dev/component/switch.html
[Link 1]: https://developers.weixin.qq.com/s/alak1cmR6JYU
[img-kQBVm7Un-1622384672422_image-20210529133612798.png]: /images/20210716/a247265d75284d4caeb7c3fe4d396156.png