微信小程序checkbox排列方向
2017-01-08 20:54
399 查看
关于微信小程序中的checkbox组件,需要在checkbox-grop包裹下,在添加一个标签来包裹,在不考虑排列放下的前提下默认排列是水平的
module.js
module.wxml
当checkbox在label标签包裹下需要垂直排列的时候
module.wxml
当checkbox在view标签包裹下需要垂直排列的时候
module.wxml
module.js
Page({ data: { imageUrls: ['http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'], inter: 2000, items: [ { name: 'USA', value: '美国' }, { name: 'CHN', value: '中国', checked: 'true' }, { name: 'BRA', value: '巴西' }, { name: 'JPN', value: '日本' }, { name: 'ENG', value: '英国' }, { name: 'TUR', value: '法国' }, ] }, checkboxChange: function (e) { console.log('checkbox发生chang事件', e.detail.value) } })
module.wxml
<checkbox-group bindchange="checkboxChange"> <label wx:for="{{items}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}">{{item.value}}</checkbox> </label> </checkbox-group>
当checkbox在label标签包裹下需要垂直排列的时候
module.wxml
<checkbox-group bindchange="checkboxChange"> <label style="display:flex;" wx:for="{{items}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}">{{item.value}}</checkbox> </label> </checkbox-group>
当checkbox在view标签包裹下需要垂直排列的时候
module.wxml
<checkbox-group bindchange="checkboxChange"> <view style="flex-direction:column;" wx:for="{{items}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}">{{item.value}}</checkbox> </view> </checkbox-group>
相关文章推荐
- 用微信 远程遥控 服务器
- 登陆加密小程序
- 怎样在微信电脑版上查看朋友圈
- C#微信公众号开发--网页授权(oauth2.0)获取用户基本信息二
- 源码推荐:仿写映客直播 ,快速切换主题 ,星星评分控件,表格样式,可以横向移动的表格, 仿微信键盘-
- Android接入微信支付,返回-1
- C#微信公众号开发--网页授权(oauth2.0)获取用户基本信息一
- 支付开发(二)----微信支付开发之微信公众号支付JAVA版
- C#微信公众号开发--微信事件交互
- 如何实现类似微信的朋友圈界面?
- C# 微信公众号开发--准备工作
- IOS 使用ShareSDK进行QQ,微信,新浪微博分享失败经验
- 年销过亿的微商小黑裙被微信封号了
- 1 第一个微信小程序
- 小程序制作回到顶部按钮
- 微信小程序首页数据初始化失败的解决方法
- [置顶] 微信充值取消出现闪屏问题引发的思考
- 微信抢红包游戏绕过指定尾数
- 微信小程序_石头剪刀布
- 微信小程序_小球弹啊弹(画布的简单使用)