文档章节

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

秀杰
 秀杰
发布于 2016/10/12 00:17
字数 748
阅读 1597
收藏 1

##LXCheckboxGroup复选框

微信小程序官方提供的checkbox有点丑,于是就写了这个。

图2-0

思路:

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数组中

步骤:

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

布局文件

<!-- CheckboxGroup容器 -->
<view class="lxCheckboxGroup">
	<view wx:for="{{items}}">
		<icon type="{{item.type}}" data-value="{{item.value}}" size="20" bindtap="bindCheckbox"/>
		<text>{{item.text}}</text>
	</view>
</view>

样式表

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

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

/*复选框图标*/
.lxCheckboxGroup icon {
	/*text用block描述,所以要左浮动*/
	float: left;
}

/*文字标签样式*/
.lxCheckboxGroup text{
	font-size: 14px;
	/*20px是左按钮的大小,4px是真实的左间距*/
	margin-left: 24px;
	/*高亮与icon相等,实现垂直居中*/
	height: 20px;
	/*文本垂直居中*/
	line-height: 20px;
	/*块布局,否则文本高度无效*/
	display: block;
}

js代码

Page({
	data: {
    items: [
	      {value: 'USA', text: '美国', type: 'circle'},
	      {value: 'CHN', text: '中国', type: 'success_circle'},
	      {value: 'BRA', text: '巴西', type: 'circle'},
	      {value: 'JPN', text: '日本', type: 'circle'},
	      {value: 'ENG', text: '英国', type: 'circle'},
	      {value: 'TUR', text: '法国', type: 'circle'},
	    ]
  	},
	bindCheckbox: function(e) {
		//绑定点击事件,将checkbox样式改变为选中与非选中
		console.log('s' + e.currentTarget.dataset.value);
	}
})

如图

图2-1

  1. 响应点击事件

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

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

		//拿到下标值,以在items作遍历指示用
		var index = parseInt(e.currentTarget.dataset.index);
		//原始的icon状态
		var type = this.data.items[index].type;
		var items = this.data.items;
		if (type == 'circle') {
			//未选中时
			items[index].type = 'success_circle';
		} else {
			items[index].type = 'circle';
		}

		// 写回经点击修改后的数组
		this.setData({
			items: items
		});
		// 遍历拿到已经勾选的值
		var checkedValues = [];
		for (var i = 0; i < items.length; i++) {
			if (items[i].type == 'success_circle') {
				checkedValues.push(items[i].value);
			}
		}
		// 写回data,供提交到网络
		this.setData({
			checkedValues: checkedValues
		});
	}
  1. text也需要绑定bindCheckBox事件,产生label for的效果,但还可以更简单的处理,就是把事件绑在容器view上,这样点击更直观。

如下面代码:

<!-- CheckboxGroup容器 -->
<view class="lxCheckboxGroup">
	<view wx:for="{{items}}" data-index="{{index}}" size="20" bindtap="bindCheckbox">
		<icon type="{{item.type}}" size="20"/>
		<text>{{item.text}}</text>
	</view>
</view>

正文完

源码下载:关注下方的公众号->回复数字1007

对小程序开发有趣的朋友关注公众号: huangxiujie85,QQ群: 581513218,微信: small_application,陆续还将推出更多作品。

公众号

© 著作权归作者所有

秀杰
粉丝 152
博文 94
码字总数 50956
作品 0
瑞安
iOS工程师
私信 提问
微信小程序开发框架从入门到放弃

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

Runner羊
2018/07/24
0
0
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
2018/08/27
0
0
京东凹凸实验室开源多端适配的 UI 组件库 Taro UI

京东凹凸实验室近日推出了一套多端 UI 组件库 —— Taro UI ,该库基于多端开发解决方案 Taro 开发,可在 微信小程序、H5、ReactNative 等多端适配运行。 Taro UI 包含以下功能特性: 简单易...

王练
2018/08/29
8.3K
11
凹凸实验室:支撑数千万消费者的小程序开发实践

作为第一批发布的小程序、同时也是大家最熟悉的微信小程序之一,京东购物小程序每天需要支持数千万的消费者。掘金特意邀请到京东购物小程序背后的一支开发团队 —— 凹凸实验室进行专访,与大...

稀土君
2018/08/24
0
0
使用 Taro 开发微信小程序的实践 + 踩坑合集

我和这篇文章 我是一名前端爱好者,现在是大三学生。大二开始接触小程序开发,目前自己唯一还在弄的项目是校内面向学生的一款课程评测小程序 uCourse。 使用过微信小程序原生语言开发过小程序...

松鼠桂鱼
03/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
1K
12
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
16
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部