微信小程序复选框的组件基本架构,微信小程序复选框开发实例

　　2017年12月4日，小编了解到，写出来，也把源码上传了，在这里给大家讲解下思路。以便大家在以后的工作中能够拿上就用。

　　先看下功能要点：

　　1.多层级的分类选择

　　2.实现下拉功能

　　3.选择完后回到上一页展示选择的信息

　　4.点击回到选择区在复选框中显示之前被选中的列项

　　这些看似很简单，其实是也是很简单，当然了，当你会了，操作了一次，自然就简单了。今天就给大家把清晰的流程跟代码贴上来。接下来文章可能有点长，不过建议大家一定要看完。因为看完了才会有整体的思路。

　　首先看下微信小程序开发中的复选框的组件基本架构，由一个checkbox-group包含着checkbox组件。然后有些属性：

　　bindchange事件处理

　　value 默认值

　　checked 默认选中

　　那么要实现一个层级的列表多选框，我们先看下基本的数据结构：

　　假设我们要有两列选择，第一列是商品选择，第二列是食品选择。首先我们要先写好一个入口

　　我们要去到这个复选框的页面，就是下面这种。点击可以展开跟收起的。

　　这个是展开之后的样子。那么现在我们要做的就是，选中多个的时候，返回到之前进入的页面，然后把相应的数据带回去显示，并且回到这个页面的时候上次选中的商品要被默认选中在这里，供客户重新增加选择。

　　思路：

　　在点击选择框的时候，触发就一个事件，将分类的下标，跟当前选中的下标传到方法当中去，见下图：

　　前面的是分类的下标，后面的是当前选中分类下面的下标。然后我们通过checkboxChange方法来获取到这两个下标。

　　接着，我们把每一次选中的值，放到事先准备好的一个数组当中去，这样方便我们确定提交的时候统一返回到上一个页面当中去。

　　然后我们来写获取选中的box的title。

　　上面的就已经写好了选中的值会自动增加到this.shops数组当中去，方便提交。我们来选择几个打印出来看下。

　　这时候，如果选择好了之后，从上页面回来的话，就不知道哪个项是哪个分类里的了，所以我们在增加到this.shops数组当中的时候增加一个分类标识字段，用来区分分类。

　　我们将分类每一项的下标做为区分字段的值，字段为section。并且加上选中的字段。

　　到这里，我们开始提交这个值到上一个页面去显示出来。先给确定按钮加个事件。

　　这里教大家一个可以在当前页面控制上一个页面的data属性的值方法：

　　上图中这个方法，在navigateBack()执行后，会改变上一实例当中的message的值，也就是我们选中的复选框的值会加到上一页面当中去。这里就要注意一点，为了呆会回到页面能够把之前选中的值重新展开显示出来，我们要把this.shops值缓存起来。完整代码如下图。

　　这时候，我们回到了上一个选择入口的页面，我们就可以获取到这个message的值，并且遍历出来。也就是我们选择好的复选框的值。

　　那么这时候，我们在进入到选择页面，要给衣服跟裤子这两个复选框加上默认选中的状态，这时候就有几个步骤，

　　加载之前的缓存，

　　操作商品数组，加上默认选中的属性

　　上图加载完缓存，用section字段来判断数据是哪个分类的，然后给一个selecteds字段来设置默认选中，这时候checkbox属性的checked就要设置成item.selecteds。

　　之后，我们把items重新赋值，就是我们操作完缓存之后的选中状态完成，重新给赋值，然后遍历出来就会出默认选中的状态。

　　这样我们重新进来的时候就是选中的状态了，客户可以在此基础上增加跟多选。那么问题来了，我们增加的时候，会自动增加到this.shops数组当中去，当我们点击同样一个复选框的时候，我们发现，多增加了一个，这时候应该是要删除掉。见如下操作

　　我们只要判断选中的时候这个selecteds字段值是不是true，如果是的话就为false，不是则为true，这样增加到this.shops数组中的数据就可以了。那么为false的时候，我们就要从this.shops当中删除这一项。我们只要在增加数据后，加上这段代码就好了，意思是selecteds如果是false的，就删除，说明不选中了。

　　这样一来，我们的this.shops里的数据就是完整的选择与否的数据了。

　　这里还有个小细节问题，在上一页面如果没有进行重新选择，而是跳到另外一个页面的时候，我们要清除到这个key为shops的缓存，以避免下次进来的时候还会加载之前重复的数据，会给客户带来不好的体验。所以这里要留意一下。

　　在上一个页面销毁的时候清缓存：(注意，最好不要用clearStorage，因为防止其它页面也有缓存被一下清空)