文档章节

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

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 269
阅读 63
收藏 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
江门
高级程序员
【值得收藏】微信小程序开发干货合集,快上车!

小程序的成功,让广大程序员早已不再纠结该不该学习小程序开发 ,但会纠结如何学习小程序开发,为帮助大家更好的学习小程序开发,特地整理一批相关学习资源,供大家交流学习! 近期优秀文章 ...

慕课网
08/10
0
0
微信小程序开发框架从入门到放弃

用框架是不可能用框架的,这辈子都不可能用框架。 微信小程序上手成本低,开发成本低,流量红利,推广成本低等等,很多公司的创业项目都会首选小程序来试水,小程序开发太火爆了,苦逼了前端工...

Runner羊
07/24
0
0
迅速上手:使用taro构建微信小程序基础教程

前言 由于微信小程序在开发上不能安装npm依赖,和开发流程上也饱受诟病;Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案,它的api基于react,在本篇文章中主要介绍了使用t...

mytac
07/18
0
0
亲身体验小程序wepy和mpvue框架的区别

前言 小编公司也随潮流,把现有h5项目,重做成小程序项目,前期是用wepy搭建的,开始感觉还不错,随着加入的功能越来越多,感觉性能也越来越成问题。下面我们来详细介绍。开发文档 原生开发小...

向建峰_Javan
08/15
0
0
一线大厂是如何开发微信小程序的?

你是否也遇到了这些微信小程序开发痛点? 自 2017 年 1 月 9 日正式发布以来,微信小程序已经渗透到我们生活的方方面面,以微信的钱包入口为例,京东、美团外卖、猫眼电影、转转二手等产品都...

稀土君
08/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

获取多个集合列表的笛卡尔积

获取多个集合笛卡尔积 电商中典型业务场景:商品搜索 单属性属性值之间为并查询 不同属性的属性值之间查询为与查询 import java.util.ArrayList;import java.util.List;/** * Created w...

键走偏锋
19分钟前
0
0
echarts 迁移地图 控制鼠标缩放大小比例

在网上找了好久没有找到解决方式,还是重新看了一下文档,终于找到的解决方案, zoom:1, //默认显示级别 scaleLimit:{min:1,max:3}, // 缩放级别 echarts 文档-配置项链接 http://echarts.b...

心驰
22分钟前
0
0
Boot2Docker ISO is out-of-date,

Boot2Docker ISO is out-of-date, downloading the latest release. 使用docker-machine时无法更新Boot2Docker ISO导致创建vm machine失败 解决方法:关闭网络,创建好之后再开启...

writeademo
30分钟前
0
0
在 Tomcat 中设置 Tapestry 框架的 html 热加载

如果开发中使用到了 Tapestry 这个框架,如果事先没有设置过的话,开发的时候 html 是不会热加载的,也就是说修改了 html 文件,不能刷新浏览器后立马看到修改完的效果,必须先重新启动应用服...

LeoXu
52分钟前
0
0
【微服务】开启巨石应用到微服务的探索

背景 在过去的一年时间里,我一直在从事一件事情,将现有的单体应用(巨石应用)向微服务改造。 接下来,将持续整理一些在微服务路上的学习与成长。 为什么要做微服务 单体应用,开发、部署简...

艳沐石
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部