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

##LXCheckboxGroup复选框

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

思路&＃xff1a;

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

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

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

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

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

步骤&＃xff1a;

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

布局文件


{{item.text}}



样式表

/*整个复选框组容器*/
.lxCheckboxGroup {width: 80px;height: 26px;margin:20px auto;
}/*单个复选框容器*/
.lxCheckboxGroup view {/*上下间距4px*/margin: 4px auto;
}/*复选框图标*/
.lxCheckboxGroup icon {/*text用block描述&＃xff0c;所以要左浮动*/float: left;
}/*文字标签样式*/
.lxCheckboxGroup text{font-size: 14px;/*20px是左按钮的大小&＃xff0c;4px是真实的左间距*/margin-left: 24px;/*高亮与icon相等&＃xff0c;实现垂直居中*/height: 20px;/*文本垂直居中*/line-height: 20px;/*块布局&＃xff0c;否则文本高度无效*/display: block;
}


js代码

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


如图

2. 响应点击事件

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

bindCheckbox: function(e) {/*绑定点击事件&＃xff0c;将checkbox样式改变为选中与非选中*///拿到下标值&＃xff0c;以在items作遍历指示用var index &＃61; parseInt(e.currentTarget.dataset.index);//原始的icon状态var type &＃61; this.data.items[index].type;var items &＃61; this.data.items;if (type &＃61;&＃61; &＃39;circle&＃39;) {//未选中时items[index].type &＃61; &＃39;success_circle&＃39;;} else {items[index].type &＃61; &＃39;circle&＃39;;}// 写回经点击修改后的数组this.setData({items: items});// 遍历拿到已经勾选的值var checkedValues &＃61; [];for (var i &＃61; 0; i

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

如下面代码&＃xff1a;


{{item.text}}



正文完

源码下载&＃xff1a;关注下方的公众号->回复数字1007

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