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的，，，，，就删除，，，，，说明不选中了。。。。。

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

　　这里尚有个小细节问题，，，，，在上一页面若是没有举行重新选择，，，，，而是跳到另外一个页面的时间，，，，，我们要扫除到这个key为shops的缓存，，，，，以阻止下次进来的时间还会加载之前重复的数据，，，，，会给客户带来欠好的体验。。。。。以是这里要注重一下。。。。。

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