微信小程序|小程序开发
微信小程序
微信小程序-小程序开发
label标签组件说明:
日报系统源码,ubuntu配置tftp,如何给云添加tomcat,亚马逊爬虫503,php5.2.6下载,seo优化分为三个阶段lzw
label标签，与html的label标签基本一样。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，就会自动将焦点转到和标签绑定的表单控件上，主要用来改进表单组件的可用性。
使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。
for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
目前可以绑定的控件有：, , ,
物资请领系统 源码,ubuntu怎么配置gtk,tomcat改版本号,爬虫风险管理,php脸部识别,电子商务seo推广比较好优化lzw
组件用法示例代码的效果如下：
官网 html5 源码下载,ubuntu中安装vs,雨林造景爬虫,php语句设置,新化优化seolzw
其中的WXML代码：
-------label绑定checkbox(内嵌)----------------label绑定radio(for)--------------------label绑定button----------------------label绑定switch-----------
其中的JS代码如下：
Page({ data: { checkboxItems: [{name: ctrip, value: 携程, checked: rue},{name: qunar, value: 去哪儿},{name: uniu, value: 途牛} ], radioItems: [{name: ctrip, value: 携程},{name: qunar, value: 去哪儿, checked: rue},{name: uniu, 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][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.name) !== -1) { changed[ adioItems[+i+].checked] = true} else { changed[ adioItems[+i+].checked] = false} } this.setData(changed) }, testLabelBindButton_1:function(){ console.log("奔走相告，button通过for可以绑定成功啦！！！"); }, testLabelBindButton_2:function(){ console.log("奔走相告，button通过内嵌可以绑定成功啦！！！"); }})
其中的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: #CAE1FF;}.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: #CAFF70; border-radius: 50px;}.label-2__icon-checked { position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; background: #1aad19; border-radius: 50%;}.section__title{ display: block; text-align: center; color: #9400D3;}.content{ padding-bottom: 15px;}
主要属性：
