资讯专栏INFORMATION COLUMN

如何造一个移动端的联动选择器(四)

ssshooter / 1260人阅读

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

写在前面

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

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

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

相关文章

  • 如何一个移动端的联动选择

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

    cgspine 评论0 收藏0
  • 如何一个移动端的联动选择

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

    leiyi 评论0 收藏0
  • 如何一个移动端的联动选择(三)

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

    ls0609 评论0 收藏0
  • 如何一个移动端的联动选择(三)

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

    zzzmh 评论0 收藏0
  • 如何一个移动端的联动选择(三)

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

    since1986 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<