背景
话不多说看下图ui以及产品的需求。
其实刚拿到还有点懵，因为web端这类组件库很多，自己也没手写过。然后整理了下思绪说说思路：
思路
一、二级分类js思路，父级和子级的状态具有联动，所以存储选中状态选用 “二维数组[[1,2],[1,3]]” 这样可以清晰了解父子级关系,数组第一项为父级id，第二项为子级id： 优点： 可以解决需求的 1，3点，需求2，4 当选中一级分类时候可以查看其下的所有二级，将二级也存储为选中/取消； 存储主要用两个数组 selectOneArr为存储去重扁平化的选中id，selectCategoryList为二维数组
实现代码
一、wxml
思路： 由于接口数据结构为 [{id：1，name：护肤，children：[id: 2, name: 护肤1]},{}]；所以为大循环中套小循环，大循环为一级分类，小循环为二级分类用openstatus控制展开折叠，默认不展示；
wxml折叠展开思路，首先写一级列表，item用min-height定高，为每一个item添加状态openStatus存储是否展开二级分类。
上述代码是在接口数据中map循环插入openstatus。
二、wxss
思路：传入selectOneArr遍历如果id存在则为选中，return true。控制选中按钮展示；
三、js
wxml中在父级中传入了 pid，子级中传入了 pid，cid ，这样便可以知道当前点击的为哪一条；
categoryList 为 接口list，selectOneArr为去重一维数组，selectCategoryList为老二维数组，newSelectCategoryList为点击事件中处理的最新存储状态二维数组；
js代码思路：
如何为 id则点击的是二级分类，如果一维数组中有这个id则当前操作为取消选中，循环老的二维数组，item[1]为存储的二级分类id !== id 不等新的点击id筛选出不取消的将 item项push到新的二维数组newSelectCategoryList中。else中为选中一条，直接push给老二维数组，并且让新二维数组newSelectCategoryList状态和老二维数组同步；如果不是id则点击一级分类，同理 如果selectOneArr中存在pid则为取消，将item[o]不为当前点击pid筛选出来。如果selectOneArr不存在为选中，这里需要区分没有二级分类的数据就是 children为空，只需要push一级分类id就会；然后同步新老二维数组；最后用 this.setData赋值；在这里对二维数组newSelectCategoryList去重扁平化为一维数组selectOneArr。扁平化用es6的 flat（）。去重用 new Set。
总结
以上就是在小程序手写一个 二级分类组件，其实多级分类也可以用上述思路进行，三位数组之类的。如果有不懂可以评论。这里建议千万别用微信组件 checkbox 做该方法，有个大坑。我第一个实现思路就是 checkbox，最后重构成现在这样，当然改方法比较仓促，因为项目太紧了，有很大优化空间。
