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，，，，由于防止其它页面也有缓存被一下清空)