微信小程序开发之小程序组件label标签解读以及分析实例
来源:互联网 发布:linux下串口调试助手 编辑:程序博客网 时间:2024/05/16 06:43
本文标签:微信微信小程序小程序开发微信开发
label标签组件说明:
label标签,与html的label标签基本一样。label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,就会自动将焦点转到和标签绑定的表单控件上,主要用来改进表单组件的可用性。
使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。
for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。
目前可以绑定的控件有:<button/>, <checkbox/>, <radio/>, <switch/>
组件用法示例代码的效果如下:
其中的WXML代码:
<view
class
=
"content"
>
<text
class
=
"section__title"
>-------label绑定checkbox(内嵌)-------</text>
<checkbox-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
=
"content"
>
<text
class
=
"section__title"
>---------label绑定radio(
for
)---------</text>
<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>
<view
class
=
"content"
>
<text
class
=
"section__title"
>-----------label绑定button-----------</text>
<label
for
=
"buttontest"
>label绑定button(
for
)</label>
<button id=
"buttontest"
bindtap=
"testLabelBindButton_1"
>Fly-1</button>
<label>
<text>label绑定button(内嵌)</text>
<button bindtap=
"testLabelBindButton_2"
>Fly-2</button>
</label>
</view>
<view
class
=
"content"
>
<text
class
=
"section__title"
>-----------label绑定
switch
-----------</text>
<view>
<label
for
=
"switchtest"
>label绑定
switch
(
for
)</label>
<
switch
id=
"switchtest"
checked/>
</view>
<view>
<label>
<text>label绑定
switch
(内嵌)</text>
<
switch
/>
</label>
</view>
<view>
<label>
<text>label绑定
switch
(内嵌)</text>
<
switch
/>
<
switch
/>
<
switch
/>
</label>
</view>
</view>
其中的JS代码如下:
Page({
data: {
checkboxItems: [
{name:
'ctrip'
, value:
'携程'
, checked:
'true'
},
{name:
'qunar'
, value:
'去哪儿'
},
{name:
'tuniu'
, value:
'途牛'
}
],
radioItems: [
{name:
'ctrip'
, value:
'携程'
},
{name:
'qunar'
, value:
'去哪儿'
, checked:
'true'
},
{name:
'tuniu'
, 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[
'radioItems['
+i+
'].checked'
] = true
}
else
{
changed[
'radioItems['
+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;
}
主要属性:
属性
类型
类型
forString绑定控件的 id(该id和需要被绑定的表单控件的id一模一样才生效)以上就是微信小程序组件label标签解读和分析实例的详细内容。
写在最后:FOR Freedom 看看外边的世界,以及IT这一行,少不了去Google查资料,最后,安利一个加速器代理。一枝红杏 加速器,去Google查资料是绝对首选,连接速度快,使用也方便。我买的是99¥一年的,通过这个链接(http://my.yizhihongxing.com/aff.php?aff=2509)注册后输上优惠码wh80,终身85折 ,平摊下来,每月才7块钱,特实惠。
本文标签: 微信微信小程序小程序开发微信开发
转自 SUN'S BLOG - 专注互联网知识,分享互联网精神!
原文地址: 《微信小程序开发之小程序组件label标签解读以及分析实例》
相关阅读:《Swift 基本排序算法之选择排序、插入排序与希尔排序》
相关阅读:《如何阅读微信聊天时好友的撤回消息?技术老司机教你!》
相关阅读:《我是 G 粉,一直关注 Google,最近 Google 有一些小动作,可能很多人不太了解》
相关阅读:《机器学习引领认知领域的技术创新,那么SaaS行业会被机器学习如何改变?》
相关阅读:《VPS 教程系列:Dnsmasq + DNSCrypt + SNI Proxy 顺畅访问 Google 配置教程》
相关阅读: 对程序员有用:2017最新能上Google的hosts文件下载及总结网友遇到的各种hosts问题解决方法及配置详解
相关BLOG:SUN’S BLOG- 专注互联网知识,分享互联网精神!去看看:www.whosmall.com
原文地址:http://whosmall.com/?post=343
- 微信小程序开发之小程序组件label标签解读以及分析实例
- 微信小程序----组件之label
- 微信小程序label组件
- 微信小程序开发教程之组件开发以及wxss介绍
- 开发微信小程序:创建小程序实例
- 微信小程序组件解读和分析:十二、picker滚动选择器
- 小程序组件开发坑
- 微信小程序实例--洗衣小程序开发经验分享
- 小程序七:组件之表单组件
- 小程序之豆瓣电影源码解读
- 微信小程序开发教程之组件
- 微信小程序开发手记之五:组件
- 微信小程序开发:e代驾Lite小程序分析
- 微信小程序开发深入解读
- 小程序label添加下划线
- 小程序开发踩坑-input组件
- 小发包小程序系统开发分析
- 微信小程序学习(11)-checkbox控件和label标签
- OpenGL3D迷宫场景设计
- PCA人脸识别
- 我的程序员生活琐记2017年3月21日
- TensorFlow 实战(五)—— 图像预处理
- caffe Ubuntu14.04 安装教程 及 出现的问题,解决办法
- 微信小程序开发之小程序组件label标签解读以及分析实例
- Gradle sync failed: Cannot locate factory for objects of type DefaultGradleConnector, as ConnectorSe
- RMQ问题之ST算法及分析
- 看看效果
- JAVA基础知识_1
- C++引用做参数
- PL/SQL 之三 游标基础用法
- @Resouce @Autowired 区别
- C++类访问另一个类的私有成员和保护成员