微信小程序多选框样式如何开发?

　　微信小程序多选框样式如何开发?我都知道微信最近推出了微信小程序功能，我们在使用微信小程序的过程中给我们带来了很多便捷，最近很多微信用户问我微信小程序多选框样式如何开发?下面小编就带你了解一下微信小程序多选框样式如何开发?

　　微信小程序多选框样式怎么开发?

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

　　LXCheckboxGroup复选框

　　微信小程序多选框样式开发的思路如下：

　　1、checkboxGroup里包着一个checkbox view组件。

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

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

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

　　微信小程序多选框样式开发的步骤如下：

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

　　微信布局文件

　　{{item.text}}

　　样式表

　　/*整个复选框组容器*/

　　.lxCheckboxGroup {

　　width: 80px;

　　height: 26px;

　　margin:20px auto;

　　}

　　/*单个复选框容器*/

　　.lxCheckboxGroup view {

　　/*上下间距4px*/

　　margin: 4px auto;

　　}

　　/*复选框图标*/

　　.lxCheckboxGroup icon {

　　/*text用block描述，所以要左浮动*/

　　/*文字微信标签样式*/

　　.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样式改变为选中与非选中

　　/*绑定点击事件，将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 = [];

　　if (items[i].type == 'success_circle') {

　　checkedValues.push(items[i].value);

　　}

　　}

　　// 写回data，供提交到网络

　　this.setData({

　　checkedValues: checkedValues

　　});

　　}

　　微信小程序多选框样式如何开发?通过小编以上的内容，你知道微信小程序多选框样式如何开发了吗?以上便是小编的全部内容了，如果需要了解更多信息，请关注微微风。

　　推荐阅读：

　　微信小程序开发工具怎么用?

　　微信小程序的开发步骤

　　微信小程序怎样批量导入公众号粉丝?