小程序教程

微信小程序复选框组件替代方案 LXCheckboxGroup组件

字号+ 作者： 来源： 2016-11-23 09:49 我要评论( )

LXCheckboxGroup复选框
微信小程序官方提供的checkbox有点丑，于是就写了这个。

思路：

1.checkboxGroup里包着一个checkbox view组件

2.每个checkbox里都包含一个icon与text

3.icon与text点击都会选中，类似于label for的用法，icon样式会切换状态。normal与highlight状态，对应的值赋予icon的type属性。

4.每个checkbox的view都有一个value属性与text属性，分别对应实现值与字面显示，只转递前者作为数据交互。view设定2个属性，data-value与data-text。

5.每次点击都会将checkbox的value值存在到checkedValues数组中

步骤：

  • 设置布局，使用文字与图标垂直居中，左间距4px，每个独占一行。

布局文件

  1. <!-- CheckboxGroup容器 -->
  2. <view class="lxCheckboxGroup">
  3.     <view wx:for="{{items}}">
  4.         <icon type="{{item.type}}" data-value="{{item.value}}" size="20" bindtap="bindCheckbox"/>
  5.         <text>{{item.text}}</text>
  6.     </view>
  7. </view>
复制代码

样式表

  1. /*整个复选框组容器*/
  2. .lxCheckboxGroup {
  3.     width: 80px;
  4.     height: 26px;
  5.     margin:20px auto;
  6. }

  8. /*单个复选框容器*/
  9. .lxCheckboxGroup view {
  10.     /*上下间距4px*/
  11.     margin: 4px auto;
  12. }

  14. /*复选框图标*/
  15. .lxCheckboxGroup icon {
  16.     /*text用block描述，所以要左浮动*/
  17.     float: left;
  18. }

  20. /*文字标签样式*/
  21. .lxCheckboxGroup text{
  22.     font-size: 14px;
  23.     /*20px是左按钮的大小，4px是真实的左间距*/
  24.     margin-left: 24px;
  25.     /*高亮与icon相等，实现垂直居中*/
  26.     height: 20px;
  27.     /*文本垂直居中*/
  28.     line-height: 20px;
  29.     /*块布局，否则文本高度无效*/
  30.     display: block;
  31. }
复制代码

js代码

  1. Page({
  2.     data: {
  3.     items: [
  4.           {value: 'USA', text: '美国', type: 'circle'},
  5.           {value: 'CHN', text: '中国', type: 'success_circle'},
  6.           {value: 'BRA', text: '巴西', type: 'circle'},
  7.           {value: 'JPN', text: '日本', type: 'circle'},
  8.           {value: 'ENG', text: '英国', type: 'circle'},
  9.           {value: 'TUR', text: '法国', type: 'circle'},
  10.         ]
  11.       },
  12.     bindCheckbox: function(e) {
  13.         //绑定点击事件，将checkbox样式改变为选中与非选中
  14.         console.log('s' + e.currentTarget.dataset.value);
  15.     }
  16. })
复制代码

如图

  • 响应点击事件

2.1 利用e.currentTarget.dataset.index传checkbox的index值，作点选与非点选操作，并将已选的values值单独存到数组checkedValues中，供返回提交等操作。

  1.     bindCheckbox: function(e) {
  2.         /*绑定点击事件，将checkbox样式改变为选中与非选中*/

  4.         //拿到下标值，以在items作遍历指示用
  5.         var index = parseInt(e.currentTarget.dataset.index);
  6.         //原始的icon状态
  7.         var type = this.data.items[index].type;
  8.         var items = this.data.items;
  9.         if (type == 'circle') {
  10.             //未选中时
  11.             items[index].type = 'success_circle';
  12.         } else {
  13.             items[index].type = 'circle';
  14.         }

  16.         // 写回经点击修改后的数组
  17.         this.setData({
  18.             items: items
  19.         });
  20.         // 遍历拿到已经勾选的值
  21.         var checkedValues = [];
  22.         for (var i = 0; i < items.length; i++) {
  23.             if (items[i].type == 'success_circle') {
  24.                 checkedValues.push(items[i].value);
  25.             }
  26.         }
  27.         // 写回data，供提交到网络
  28.         this.setData({
  29.             checkedValues: checkedValues
  30.         });
  31.     }
复制代码

  • text也需要绑定bindCheckBox事件，产生label for的效果，但还可以更简单的处理，就是把事件绑在容器view上，这样点击更直观。

如下面代码：

  1. <!-- CheckboxGroup容器 -->
  2. <view class="lxCheckboxGroup">
  3.     <view wx:for="{{items}}" data-index="{{index}}" size="20" bindtap="bindCheckbox">
  4.         <icon type="{{item.type}}" size="20"/>
  5.         <text>{{item.text}}</text>
  6.     </view>
  7. </view>
复制代码


　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评
精彩导读
2-HelloWorld微信小程序

2-HelloWorld微信小程序

微信小程序 轮播图 swiper图片组件

微信小程序 轮播图 swiper图片组件

微信小程序开发记账应用实战服务端之用户注册与登录

微信小程序开发记账应用实战服务端之用户注册

微信小程序倒计时组件

微信小程序倒计时组件

微信小程序实现购物车页面

微信小程序实现购物车页面

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习
l