找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1587

所属分类: 微信开发 微信小程序开发资源



本版块为微信小程序资源分享区,包括微信小程序开发中可能会用到的各类小程序开发工具、小程序demo源码及开发教程等。

快捷导航www.henkuai.com):微信小程序社区微信小程序导航微信小程序资源下载微信小程序官方课程

[更新动态] 微信小程序开发:表单组件label开发教程

[复制链接]
查看: 3210|回复: 31
最佳答案
0 

6

主题

11

帖子

153

积分

新人求带

积分
153
 楼主| 发表于 2016-9-29 16:26:18 | 显示全部楼层 |阅读模式
label

用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。

for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有:<button/>, <checkbox/>, <radio/>, <switch/>。

属性名
类型
说明

forString绑定控件的 id示例代码:
  1. <view class="section section_gap">
  2. <view class="section__title">表单组件在label内</view>
  3. <checkbox-group class="group" bindchange="checkboxChange">
  4.   <view class="label-1" wx:for="{{checkboxItems}}">
  5.     <label>
  6.       <checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox>
  7.       <view class="label-1__icon">
  8.         <view class="label-1__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
  9.       </view>
  10.       <text class="label-1__text">{{item.value}}</text>
  11.     </label>
  12.   </view>
  13. </checkbox-group>
  14. </view>

  15. <view class="section section_gap">
  16. <view class="section__title">label用for标识表单组件</view>
  17. <radio-group class="group" bindchange="radioChange">
  18.   <view class="label-2" wx:for="{{radioItems}}">
  19.     <radio id="{{item.name}}" hidden value="{{item.name}}" checked="{{item.checked}}"></radio>
  20.     <view class="label-2__icon">
  21.       <view class="label-2__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
  22.     </view>
  23.     <label class="label-2__text" for="{{item.name}}"><text>{{item.name}}</text></label>
  24.   </view>
  25. </radio-group>
  26. </view>
  27. Page({
  28.   data: {
  29.     checkboxItems: [
  30.       {name: 'USA', value: '美国'},
  31.       {name: 'CHN', value: '中国', checked: 'true'},
  32.       {name: 'BRA', value: '巴西'},
  33.       {name: 'JPN', value: '日本', checked: 'true'},
  34.       {name: 'ENG', value: '英国'},
  35.       {name: 'TUR', value: '法国'},
  36.     ],
  37.     radioItems: [
  38.       {name: 'USA', value: '美国'},
  39.       {name: 'CHN', value: '中国', checked: 'true'},
  40.       {name: 'BRA', value: '巴西'},
  41.       {name: 'JPN', value: '日本'},
  42.       {name: 'ENG', value: '英国'},
  43.       {name: 'TUR', value: '法国'},
  44.     ],
  45.     hidden: false
  46.   },
  47.   checkboxChange: function(e) {
  48.     var checked = e.detail.value
  49.     var changed = {}
  50.     for (var i = 0; i < this.data.checkboxItems.length; i ++) {
  51.       if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
  52.         changed['checkboxItems['+i+'].checked'] = true
  53.       } else {
  54.         changed['checkboxItems['+i+'].checked'] = false
  55.       }
  56.     }
  57.     this.setData(changed)
  58.   },
  59.   radioChange: function(e) {
  60.     var checked = e.detail.value
  61.     var changed = {}
  62.     for (var i = 0; i < this.data.radioItems.length; i ++) {
  63.       if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
  64.         changed['radioItems['+i+'].checked'] = true
  65.       } else {
  66.         changed['radioItems['+i+'].checked'] = false
  67.       }
  68.     }
  69.     this.setData(changed)
  70.   }
  71. })
  72. .label-1, .label-2{
  73.     margin-bottom: 15px;
  74. }
  75. .label-1__text, .label-2__text {
  76.     display: inline-block;
  77.     vertical-align: middle;
  78. }

  79. .label-1__icon {
  80.     position: relative;
  81.     margin-right: 10px;
  82.     display: inline-block;
  83.     vertical-align: middle;
  84.     width: 18px;
  85.     height: 18px;
  86.     background: #fcfff4;
  87. }

  88. .label-1__icon-checked {
  89.     position: absolute;
  90.     top: 3px;
  91.     left: 3px;
  92.     width: 12px;
  93.     height: 12px;
  94.     background: #1aad19;
  95. }


  96. .label-2__icon {
  97.     position: relative;
  98.     display: inline-block;
  99.     vertical-align: middle;
  100.     margin-right: 10px;
  101.     width: 18px;
  102.     height: 18px;
  103.     background: #fcfff4;
  104.     border-radius: 50px;
  105. }

  106. .label-2__icon-checked {
  107.     position: absolute;
  108.     left: 3px;
  109.     top: 3px;
  110.     width: 12px;
  111.     height: 12px;
  112.     background: #1aad19;
  113.     border-radius: 50%;
  114. }

  115. .label-4_text{
  116.     text-align: center;
  117.     margin-top: 15px;
  118. }
复制代码



更多关于微信小程序开发经验分享,关注公众号:yyhLearn。

qrcode_for_gh_85fc845b1296_258.jpg


回复

使用道具 举报

最佳答案
0 

2

主题

7

帖子

159

积分

新人求带

积分
159
发表于 2018-1-26 12:24:48 | 显示全部楼层
新人学习
回复

使用道具 举报

最佳答案
0 

0

主题

1432

帖子

1万

积分

S2

积分
13343
发表于 2018-2-10 12:22:36 | 显示全部楼层
微信小程序开发:表单组件label开发教程
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

39

帖子

242

积分

新人求带

积分
242
发表于 2018-2-18 18:34:26 | 显示全部楼层
新人学习中
回复 支持 反对

使用道具 举报

最佳答案
0 

3

主题

421

帖子

3448

积分

专家路上

积分
3448
发表于 2018-6-25 15:25:22 | 显示全部楼层
顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

24

帖子

340

积分

等待验证会员

积分
340
发表于 2018-6-25 16:48:22 | 显示全部楼层
顶顶顶顶顶顶顶顶顶顶顶顶顶顶
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

24

帖子

340

积分

等待验证会员

积分
340
发表于 2018-6-25 16:53:26 | 显示全部楼层

顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

8

帖子

60

积分

等待验证会员

积分
60
发表于 2018-6-28 14:43:49 | 显示全部楼层
学习学习学习学习
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

5

帖子

60

积分

等待验证会员

积分
60
发表于 2018-6-28 14:55:25 | 显示全部楼层
谢谢谢谢谢谢
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

31

帖子

110

积分

等待验证会员

积分
110
发表于 2018-6-30 08:36:01 | 显示全部楼层
的点点滴滴多多多多多多多多多多多多多多多
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com