文档章节

微信小程序把玩(十五)checkbox组件

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 269
阅读 121
收藏 0

这里写图片描述

不得不吐糟下checkbox默认样式真是有点略丑!!!checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-group(只能包含checkbox)中设置监听事件。

checkbox-group监听方法:

这里写图片描述

checkbox多选属性:

这里写图片描述

wxml

<!--checkbox-group就是一个checkbox组 有个监听事件bindchange,监听数据选中和取消--> <checkbox-group bindchange="listenCheckboxChange"> <!--这里用label显示内容,for循环写法 wx:for-items 默认item为每一项--> <label style="display: flex;" wx:for-items="{{items}}"> <!--value值和默认选中状态都是通过数据绑定在js中的--> <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> </checkbox-group>

js

Page({
    /** * 初始化数据 */
  data:{
    items: [
        {name: 'JAVA', value: 'Android', checked: 'true'},
        {name: 'Object-C', value: 'IOS'},
        {name: 'JSX', value: 'ReactNative'},
        {name: 'JS', value: 'wechat'},
        {name: 'Python', value: 'Web'}
    ]
  },

  /** * 监听checkbox事件 */
  listenCheckboxChange:function(e) {
      console.log('当checkbox-group中的checkbox选中或者取消是我被调用');
      //打印对象包含的详细信息
      console.log(e);

  },

  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

本文转载自:http://blog.csdn.net/u014360817/article/details/52666794

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
私信 提问
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
08/27
0
0
线上直播 | 掘金开发者大会小程序专场,码上出发

掘金即将于明日在北京富力万丽酒店召开以「掘金开发者大会 · 微信小程序专场」的大型开发者活动,届时将有超过 600 名开发者、数十个小程序团队、数十家合作伙伴及媒体参与。此次活动由腾讯...

稀土君
09/15
0
0
7 天后,让掘金开发者大会带你探索微信小程序开发的无限可能!

掘金即将于2018年9月16日在北京富力万丽酒店召开以「掘金开发者大会 · 微信小程序专场」的大型开发者活动,届时将有超过 600 名开发者、数十个小程序团队、十余家合作伙伴及数十家媒体参与。...

稀土君
09/10
0
0
凹凸实验室:支撑数千万消费者的小程序开发实践

作为第一批发布的小程序、同时也是大家最熟悉的微信小程序之一,京东购物小程序每天需要支持数千万的消费者。掘金特意邀请到京东购物小程序背后的一支开发团队 —— 凹凸实验室进行专访,与大...

稀土君
08/24
0
0
微信小程序插件 - 开发教程

昨天(2018.3.13),微信小程序发布了重大功能更新,支持插件的使用和开发,个人预计,不超过2个月,优质服务的插件将会如雨后春笋般涌现。 这篇文章,我将会带大家,从0开始,学习如何开发和...

理工男海哥
03/14
554
0

没有更多内容

加载失败,请刷新页面

加载更多

Dubbo下一站:Apache顶级项目

导读: 近日,在Apache Dubbo开发者沙龙杭州站的活动中,阿里巴巴中间件技术专家曹胜利(展图)向开发者们分享了Dubbo2.7版本的规划。 本文将为你探秘 Dubbo 2.7背后的思考和实现方式。 作者:...

阿里云官方博客
5分钟前
0
0
量化策略构建:均值回归模型

“ 现在已然衰朽者,将来可能重放异彩。现在备受青睐者,将来却可能黯然失色。” 当事物发展严重偏离其均值时,均值会像万有引力一样令其回归。如果时间足够长,万物都终将回归于其均值。正所...

酒逢知己千杯少
7分钟前
1
0
从内部自用到对外服务,配置管理的演进和设计优化实践

本文整理自阿里巴巴中间件技术专家彦林在中国开源年会上的分享,通过此文,您将了解到: 微服务给配置管理所带来的变化 配置管理演进过程中的设计思考 配置管理开源后的新探索 配置中心控制台...

阿里云云栖社区
12分钟前
0
0
使用screen恢复会话时出现There is no screen to be resumed matching错误解决办法

有时在恢复 screen 时会出现 There is no screen to be resumed matching ******? 输入命令 :screen -d **** 然后再使用恢复命令恢复就可以了...

Alex142857
18分钟前
0
0
只到及格线?盘点科技公司遵循的数据伦理

在过去的一段时间中,数据泄露的新闻时有发生,这也引发了大众对于谁拥有我们的数据、我们的数据如何被使用和共享的关注。尽管在事情发生之后,很多科技公司都表态会以更好的方式来使用和保护...

技术阿飞
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部