文档章节

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

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 269
阅读 42
收藏 0
点赞 0
评论 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
江门
高级程序员
分享几个微信小程序开发框架和工具

###【小程序开发框架】 1、官方框架MINA 小程序提供的开发框架为MINA框架,它类似于淘宝Weex、Vue框架。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能...

codeGoogle ⋅ 04/18 ⋅ 0

憧憬Licoy/wepy-com-loadings

微信小程序Loading加载动画组件 基于Wepy开发的微信小程序loading加载动画组件 说明 安装 npm i wepy-com-loadings 使用 import wepy from 'wepy'import Loadings from "wepy-com-loadings"e...

憧憬Licoy ⋅ 04/26 ⋅ 0

wx-jq:一套完全原创的微信小程序插件集合库

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 在线演示: 下载地址...

透笔度 ⋅ 01/25 ⋅ 2

微信小程序 UI 组件库 - iView Weapp

iView Weapp —— 一套高质量的微信小程序 UI 组件库 iView Weapp 是什么? 微信小程序提供了自定义组件的功能,这使得 iView Weapp 成为了可能。小程序已经提供了很多组件和 API,但它们过于...

aresn ⋅ 06/11 ⋅ 0

一套 React 语法规范的多端开发解决方案 - Taro

Taro - 用 React 写小程序,生成 H5、React Native 等多端引用 Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼。 Taro 是什么? Taro 是由京东 - 凹凸实验室打造的一套...

yuche ⋅ 06/11 ⋅ 0

透笔度/wx-jq

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 查看效果截图: http...

透笔度 ⋅ 01/26 ⋅ 0

iView 发布微信小程序 UI 组件库 iView Weapp

末尾有彩蛋。 过去的两年里,iView 开源项目已经帮助成千上万的开发者快速完成网站开发,大幅度提高了开发效率,成为 Vue.js 生态里重要的一部分。 与此同时,我们也在思考,除了服务 PC Web...

Aresn ⋅ 06/11 ⋅ 0

海报生成,但是微信小程序的绘图不能使用自定义弹窗,怎么实现功能

微信小程序,有一个需求 做海报生成,编写自己的文字内容保存海报生成图片,使用微信小程序的绘图api无法使用自定义弹窗实现文字内容修改,自定义弹窗层级在原生组件下层,有什么办法实现海报...

鱼被吃了 ⋅ 04/26 ⋅ 0

微信小程序开发--『狗蛋TV』

狗蛋TV 狗蛋TV是基于微信小程序开发的一款App。gordanLee每天都会推荐一首歌、一篇文章、一段短视频,每天用十分钟的细碎时光,点燃内心的光明。目前分为音乐,短视频,影评三个模块。 线上开...

李帅醒 ⋅ 05/15 ⋅ 0

微信小程序评论插件 - WxComment

WxComment 是一个微信小程序的评论插件,结合BaaS提供商LeanCloud,无需其他另外的个人或者云服务器,就可以免费使用。解决了需要个人去注册域名、备案、购买云服务器的繁杂问题。 特色 独立...

yicm ⋅ 05/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

开启Swarm集群以及可视化管理

在搭建的两台coreos服务器上开启swarm集群 前置条件: docker均开启2375端口 同一个局域网内 主服务器上安装Portainer容器 安装Portainer容器执行: docker run -d -p 9000:9000 --restart=a...

ykbj ⋅ 27分钟前 ⋅ 0

单例设计模式

1、单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例 2、饿汉式单例类 在这个类被加载时,静态变量instance会被初始化,此时类的私有构造子会被调用 饿汉式是典型...

职业搬砖20年 ⋅ 32分钟前 ⋅ 0

前端基础(四):前端国际规范收集

字数:1142 阅读时间:5分钟 前言 由于前端技术的灵活性和杂乱性,导致网上的许多解决方案不够全面甚至是完全错误,容易起到误导作用。所以,我对搜索到的解决方案往往是存疑态度。那么,如何...

老司机带你撸代码 ⋅ 35分钟前 ⋅ 0

Failed to open/create Network-VirtualBox Host-Only

虚拟机版本 : Oracle Vm VirtualBox 5.2.12 报错时机:开网卡二,重启虚拟机报错 "Failed to open/create the internal network 'HostInterfaceNetworking-VirtualBox Host-Only Ethernet Ada......

p至尊宝 ⋅ 38分钟前 ⋅ 0

三分钟学会如何在函数计算中使用 puppeteer

摘要: 使用 puppeteer 结合函数计算,可以快速的构建弹性的服务完成各种功能,包括:生成网页截图或者 PDF、高级爬虫,可以爬取大量异步渲染内容的网页、模拟键盘输入、表单自动提交、登录网...

阿里云云栖社区 ⋅ 41分钟前 ⋅ 0

springMVC接收表单时 Bean对象有Double Int Char类型的处理

前台ajax提交表单price为double类型 后台controller就介绍不到 400错误 前台 实体类: public class ReleaseMapIconConfig{ private String id; private long maxValue; private long minVal......

废柴 ⋅ 43分钟前 ⋅ 0

ZOOKEEPER安装

工作需要在ubuntu上配置了一个zookeeper集群,有些问题记录下来。 1. zookeeper以来java,所以首先要安装java。但是ubuntu系统有自带的jdk,需要通过命令切换java版本: $ sudo update-alter...

恰东 ⋅ 46分钟前 ⋅ 0

linux 进程地址空间的一步步探究

我们知道,在32位机器上linux操作系统中的进程的地址空间大小是4G,其中0-3G是用户空间,3G-4G是内核空间。其实,这个4G的地址空间是不存在的,也就是我们所说的虚拟内存空间。 那虚拟内存空间...

HelloRookie ⋅ 46分钟前 ⋅ 0

myatis #{}与${}区别及原理

https://blog.csdn.net/wo541075754/article/details/54292751

李道福 ⋅ 50分钟前 ⋅ 0

三分钟学会如何在函数计算中使用 puppeteer

摘要: 使用 puppeteer 结合函数计算,可以快速的构建弹性的服务完成各种功能,包括:生成网页截图或者 PDF、高级爬虫,可以爬取大量异步渲染内容的网页、模拟键盘输入、表单自动提交、登录网...

猫耳m ⋅ 51分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部