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

leiyi 发布于2019-08-01 16:03 / 2243人阅读

摘要：写在前面之前写了一篇为移动端而生的自定义多级联动选择器，得到了很多人的关注。具体实现步骤如下先传入一个需要计算深度的对象给，判断如果还有则迭代，并计算深度。如果增加了联动级数需要来判断，则为新增加的联动绑定新的事件。

写在前面

之前写了一篇 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，一个卖萌出家的算法妹纸。

GPU云服务器云服务器如何选择一个好域名关于适配移动端的移动端的html js 移动端的表单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50269.html

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

摘要：写在前面之前写了一篇为移动端而生的自定义多级联动选择器，得到了很多人的关注。具体实现步骤如下先传入一个需要计算深度的对象给，判断如果还有则迭代，并计算深度。如果增加了联动级数需要来判断，则为新增加的联动绑定新的事件。写在前面之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器，得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇，所以写了几篇文章，来说...

ssshooter 2019-08-30 13:12 评论0 收藏0
如何造一个移动端的联动选择器（四）

摘要：写在前面之前写了一篇为移动端而生的自定义多级联动选择器，得到了很多人的关注。具体实现步骤如下先传入一个需要计算深度的对象给，判断如果还有则迭代，并计算深度。如果增加了联动级数需要来判断，则为新增加的联动绑定新的事件。写在前面之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器，得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇，所以写了几篇文章，来说...

cgspine 2019-08-22 10:46 评论0 收藏0
如何造一个移动端的联动选择器（三）

摘要：写在前面之前写了一篇为移动端而生的自定义多级联动选择器，得到了很多人的关注。预知后话地址为移动端而生的自定义多级联动选择器到此，时间选择器的核心算法就已经基本掌握了。写在前面之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器，得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇，所以写了几篇文章，来说说它的成长史~ 在阅读本文之前，确保你有稍微看过 ...

ls0609 2019-08-02 15:56 评论0 收藏0
如何造一个移动端的联动选择器（三）

摘要：写在前面之前写了一篇为移动端而生的自定义多级联动选择器，得到了很多人的关注。预知后话地址为移动端而生的自定义多级联动选择器到此，时间选择器的核心算法就已经基本掌握了。写在前面之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器，得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇，所以写了几篇文章，来说说它的成长史~ 在阅读本文之前，确保你有稍微看过 ...

zzzmh 2019-08-30 13:11 评论0 收藏0
如何造一个移动端的联动选择器（三）

摘要：写在前面之前写了一篇为移动端而生的自定义多级联动选择器，得到了很多人的关注。预知后话地址为移动端而生的自定义多级联动选择器到此，时间选择器的核心算法就已经基本掌握了。写在前面之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器，得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇，所以写了几篇文章，来说说它的成长史~ 在阅读本文之前，确保你有稍微看过 ...

since1986 2019-08-22 10:46 评论0 收藏0