如何造一个移动端的联动选择器（四）

写在前面

之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器，得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇，所以写了几篇文章，来说说它的成长史~

在阅读本文之前，确保你有稍微看过 MultiPicker 的源码 喔~

点击查看源码 ，也可以在 npm 上找到他们：

• 日期选择器 - DateSelector - NPM.

• 自定义json选择器 - MultiPicker. NPM.

回顾上上上集：如何造一个移动端的联动选择器（一）
回顾上上集：如何造一个移动端的联动选择器（二）
回顾上集: 如何造一个移动端的联动选择器（三）

六、自定义JSON选择器 的联动算法

思考第8个问题：『如何确定下一级的联动级数呢？』

由于前面规范了自定义JSON的格式，所以，如果判断下一级联动的级数问题，就转化成为了【如何计算下一级 child 的深度】问题。

我的解决方案是：迭代调用 checkArrDeep 来，就能判断是否还有子联动，从而计算深度。

具体实现步骤如下：

① 先传入一个需要计算深度的对象给 checkArrDeep，判断如果还有child则迭代，并计算深度。

② 生成所有子联动对应的 li，并更新dom，同时把子联动的 translate3d 都设置成 (0, 0, 0);

这步和 日期选择器 有着本质的不同，这里的子联动一定会更新，并且所有子联动一定会 translate3d(0 ,0 ,0)；

PS: 这里有一个小技巧，就是一定要记录在更新联动之前的上一次联动的级数。我用 ulCount 来记录上一次联动的级数，在完成所有更新操作之后，最后更新ulCount，以便下次迭代使用。

③ 如果增加了联动级数（需要ulCount来判断），则为新增加的联动 ul 绑定新的touch事件。如果减少了联动级数，则清除dom。

④ 重新设置联动的宽度，并同步更新所有计算联动会使用到的数据，包括ulCount：

七、用户可以自定义callback

思考第9个问题：『如何确定用户想要什么样的数据格式呢？』

最完美的解决方案，就是让用户自己写callback，自己解决所有的数据格式问题。

用户可以在回调中 拼接自己想要的字符串 或 构造后台想要的json格式。很大程度上的增加了灵活度。

至此， 『日期选择器 - DateSelector』 和 『自定义json选择器 - MulitiPicker』就算完成了。

点击开始了解 MultiPicker - 自定义多级联动选择器

预知后话

Github地址:『为移动端而生』的自定义多级联动选择器

到此，这个选择器的成长史就结束啦~ 多谢观看~

我是嘉宝Appian，一个卖萌出家的算法妹纸。