小程序开发之组件label标签

时间：2024-03-31 10:05:50

label标签

label标签为 input等元素定义标注（标记）。
用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。
for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
目前可以绑定的控件有：<button>, <checkbox>, <radio>, <switch>。
小程序开发之组件label标签
例如：
for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
例子中的区别
表单组件在label内：点击点选框或者文字选中
label用for标识表单组件：点选框点击无反应，点击文字才能选中

效果展示


小程序开发之组件label标签

代码
index.wxml

<view class="contentView">
<view class="label_title">表单组件在label内</view>
<checkbox-group class="group" bindchange="checkboxChange">
  <view class="label1" wx:for="{{checkboxItems}}">
    <label>
      <checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox>
      <view class="label1_icon">
        <view class="label1_icon_checked" style="opacity:{{item.checked ? 1: 0}}"></view>
      </view>
      <text class="label1_text">{{item.value}}</text>
    </label>
  </view>
</checkbox-group>
</view>


<view class="contentView">
<view class="label_title">label用for标识表单组件</view>
<radio-group class="group" bindchange="radioChange">
  <view class="label2" wx:for="{{radioItems}}">
    <radio id="{{item.name}}" hidden value="{{item.name}}" checked="{{item.checked}}"></radio>
    <view class="label2_icon">
      <view class="label2_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.wxss

.contentView {
  width: 100%;
}

.label_title {
  margin-left: 20rpx;
  color: gray
}
.label1 {
  margin-left: 40rpx;
  margin-bottom: 15rpx;
}
.label1_icon {
  /*
  position 属性规定元素的定位类型。
    absolute  生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
    fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
    relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
    static  默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
    inherit   规定应该从父元素继承 position 属性的值。 
  
  display 属性规定元素应该生成的框的类型。
    none  此元素不会被显示。
    block   此元素将显示为块级元素，此元素前后会带有换行符。
    inline  默认。此元素会被显示为内联元素，元素前后没有换行符。
    inline-block  行内块元素。
    list-item   此元素会作为列表显示。
    ......
  
  vertical-align 属性设置元素的垂直对齐方式。
    baseline  默认。元素放置在父元素的基线上。
    sub   垂直对齐文本的下标。
    super   垂直对齐文本的上标
    top   把元素的顶端与行中最高元素的顶端对齐
    text-top  把元素的顶端与父元素字体的顶端对齐
    middle  把此元素放置在父元素的中部。
    bottom  把元素的顶端与行中最低的元素的顶端对齐。
    text-bottom   把元素的底端与父元素字体的底端对齐。
  */
  position: relative;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  width: 25rpx;
  height: 25rpx;
  background: white;
  /* 边框 */
  border:1rpx solid lightgrey;
}
.label1_icon_checked{
  position: absolute;
  width: 25rpx;
  height: 25rpx;
  background: #1aad19;
}
.label1_text{
  display: inline-block;
  vertical-align: middle;
}

.label2 {
  margin-left: 40rpx;
  margin-bottom: 15rpx;
}
.label2_icon {
  position: relative;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  width: 25rpx;
  height: 25rpx;
  background: white;
  /* 边框 */
  border:1rpx solid lightgrey;
}
.label2_icon_checked{
  position: absolute;
  width: 25rpx;
  height: 25rpx;
  background: #1aad19;
  border-radius: 50%;
}
.label2_text{
  display: inline-block;
  vertical-align: middle;
}

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
    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)
  }
})





相关文章