表单组件checkbox:官方文档

Demo Code:

JS

Page({
data:{
items:[
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'TUR', value: '法国'}
]
},
checkboxChange:function(options){
console.log('checkbox发生change事件,携带value值为:', options.detail.value);
}
})

WXML:

<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
</label>
</checkbox-group>

WXSS:

.checkbox{
display:block;
margin-left:10px;
margin-top:5px;
}

微信小程序组件checkbox的更多相关文章

  1. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  2. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  3. 微信小程序——组件(二)

    在上篇文章组件(一)里已经讲解了如何创建一个项目,现在继续...讲解一个页面布局以及各个组件的使用.在学习过程中,发现小程序支持flex布局,这对于学习过react native的人来说太好了,布局方 ...

  4. 微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

    通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.che ...

  5. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  6. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  7. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  8. 微信小程序组件通信

    父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 < ...

  9. 微信小程序组件化实践

    Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...

随机推荐

  1. 最纯粹的直播技术实战02-Camera的处理以及推流

    最纯粹的直播技术实战02-Camera的处理以及推流 最新实战教程.Android自己主动化刷量.作弊与防作弊.案例:刷友盟统计.批量注冊苹果帐号 这个系列的文章将会研究最纯粹的Android直播的实 ...

  2. PAT006 Tree Traversals Again

    题目: An inorder binary tree traversal can be implemented in a non-recursive way with a stack. For exa ...

  3. 第一百五十八节,封装库--JavaScript,ajax说明

    封装库--JavaScript,ajax说明 封装库ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 /** ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 * ...

  4. 转载:ResNeXt算法详解

    原文连接:http://blog.csdn.net/u014380165/article/details/71667916, 大神"AI之路”有很多经典的总结,推荐前往..   论文:Agg ...

  5. 在UI线程之外,多线程处理Bitmaps

    多线程处理Bitmaps     上一篇,我们讨论了:Android有效的处理Bitmap,降低内存 ,可是最好不要运行在主线程(UI线程),假设图片是本地的或者网络的又或者是其它地方的. 图片载入的 ...

  6. Linux系统优化之网络IO调优

    修改 vi /etc/sysctl.conf后执行命令 sysctl -p立即生效 首先,系统的不同也会导致 /etc/下的 文件的不同,原本powerpc 环境下 在 /etc/init.d/下有个 ...

  7. github删除已经push到服务器上的commit的方法

    使用两条指令: git reset --hard <commit_id> git push origin HEAD --force 其中commit_id是你想回到的commit的id(即 ...

  8. Mininet加强版——DOT(分布式OpenFlow试验平台)

    前言 之前在做SDN实验的时候,需要用到包含2000+个交换机的fattree拓扑,当时用的是mininet,生成整个拓扑需要十五六个小时,最终在异常艰苦的环境下做完了实验,之后听说了有DOT(Dis ...

  9. 【BZOJ3876】[Ahoi2014]支线剧情 有上下界费用流

    [BZOJ3876][Ahoi2014]支线剧情 Description [故事背景] 宅男JYY非常喜欢玩RPG游戏,比如仙剑,轩辕剑等等.不过JYY喜欢的并不是战斗场景,而是类似电视剧一般的充满恩 ...

  10. 《从零开始学Swift》学习笔记(Day54)——抛出错误

    原创文章,欢迎转载.转载请注明:关东升的博客 能放到try后面调用函数或方法都是有要求的,他们是有可能抛出错误,在这些函数或方法声明的参数后面要加上throws关键字,表示这个函数或方法可以抛出错误. ...