微信小程序 label 组件详解及简单实例


Posted in Javascript onJanuary 10, 2017

微信小程序label

相关文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现效果图:

微信小程序 label 组件详解及简单实例

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

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

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

属性名 类型 说明
for String 绑定控件的id

示例代码:

<view class="section section_gap">
<view class="section__title">表单组件在label内</view>
<checkbox-group class="group" bindchange="checkboxChange">
 <view class="label-1" wx:for-items="{{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-items="{{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>


<view class="section section_gap">
<view class="section__title">绑定button</view>
<label class="label-3">
 <text>点击这段文字,button会被选中</text>
</label>
<view class="btn-area">
 <button type="default" name="1" bindtap="tapEvent">按钮</button>
</view>
</view>

<view class="section section_gap">
<view class="section__title">label内有多个时选中第一个</view>
<label class="label-4">
 <checkbox> 选中我 </checkbox>
 <checkbox> 选不中 </checkbox>
 <checkbox> 选不中 </checkbox>
 <checkbox> 选不中 </checkbox>
 <view class="label-4_text">点我会选中第一个</view>
</label>
</view>
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)
 }
})
.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;
}
Javascript 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
javascript的this关键字详解
May 20 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 #Javascript
微信小程序 input输入框详解及简单实例
Jan 10 #Javascript
微信小程序 form组件详解及简单实例
Jan 10 #Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 #Javascript
使用vue.js实现联动效果的示例代码
Jan 10 #Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 #Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 #Javascript
You might like
德劲1102收音机的打理维修案例
2021/03/02 无线电
DOMXML函数笔记
2006/10/09 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
Python2与Python3的区别实例分析
2019/04/11 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
电气自动化个人求职信范文
2014/02/03 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
禁止酒驾标语
2014/06/25 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书