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

先看下功能要点：

1.多层级的分类选择

2.实现下拉功能

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

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

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

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

bindchange事件处理

value 默认值

checked 默认选中

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

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

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

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

思路：

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

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

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

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

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

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

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

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

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

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

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

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

加载之前的缓存，

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

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

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

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

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

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

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

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