微信小程序----组件之label

来源：互联网发布：versions for mac使用编辑：程序博客网时间：2024/06/11 16:51

效果图

项目结构

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.wxss

.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: #fcfff4;}.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: #fcfff4;    border-radius: 50px;}.label-2__icon-checked {    position: absolute;    left: 3px;    top: 3px;    width: 12px;    height: 12px;    background: #1aad19;    border-radius: 50%;}.label-4_text{    text-align: center;    margin-top: 15px;}

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

源码下载：http://download.csdn.net/download/zhaihaohao1/9968483

阅读全文

0 0