热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序label组件详解实例代码

这篇文章主要介绍了微信小程序label组件详解及简单实例的相关资料,需要的朋友可以参考下
这篇文章主要介绍了微信小程序 label 组件详解及简单实例的相关资料,需要的朋友可以参考下

实现效果图:


表单组件在label内

 
 
 




label用for标识表单组件

 
 
 
  
 
 
 





绑定button


 




label内有多个时选中第一个


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 


.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;
}

相关文章:

微信小程序 数据访问实例详解

微信小程序开发教程实例步骤详解

微信小程序开发小程序架构篇图解

以上就是微信小程序label组件详解实例代码的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
author-avatar
手机用户2502887185
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有