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

·  阅读 2791
如何造一个移动端的联动选择器(三)

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

这一阶段,你将会了解到页面dom的实现手势算法的技巧

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

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

回顾上集:

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

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


四、日期选择器 和 自定义 JSON 选择器 的联动差别

思考第5个问题:『如果说滑动手势是它们之间的共同点,那它们之间又有什么区别?』

一个最明显的区别就是,日期选择器可以在多级之间反复调整,而自定义JSON 选择器只能从高级联动往下调整。

比如,在用日期选择器选择生日的时候。不小心操作失误了,选择成了1994-1-16

我想要修改年份为1995。当我滑动第一级联动时,后面的联动是不会改变的。


但是当我选择城市的时候,如果我选择了北京,下面的联动等级一定会全部配合 “北京” 这个高级联动,向下自适应改变。

选择了广东,下面的联动等级也一定会全部配合 “广东” 这个高级联动,向下自适应改变。

所以为了区别这两个不一样的联动场景,出现了两套不一样的联动算法。

五、日期选择器 的联动算法

思考第6个问题:『如何协调用户设置的时间点和实际时间点之间的联系?』

前面说到,用户如果设置了【月日时分】这四个时间单位的话,他可能会输入beginTime:[3,27,12,12], endTime 和 recentTime 也是类似。但是计算机如何快速识别这个开始时间,其实就是[2016, 3, 27, 12, 12] 呢?

如果把用户设置的时间点称为【虚拟时间】,而计算机能够处理的完整时间点称为【实际时间】,这个问题就简化了许多。

我做了一个小技巧,就是在我判断用户参数合法性的同时,把用户作为参数传入的【虚拟时间】( 如 :beginTime、endTime、 recentTime),转变成一个代码能够快速识别的【真实时间】(如:begin_time、end_time、 recent_time)。

另外,idxArrmaxHeightdistance 对应下标的值是和【虚拟时间】对应下标的值保持一致。

思考第7个问题:『如何计算联动数据,才能做到在多级之间反复调整?』

在我最新的重构算法中,我的解决方案是:

当ul被滑动时,就从最高级的联动开始【递归调用】。被递归的函数叫做checkRange

实现步骤如下:

① 每次touchend的时候,会先将当前滑动的结果保存,再调用checkRange(0);

checkRange会根据你的参数,直接设置下一级联动应该有的数据范围:

③ 判断好下一级的数据范围后,需要判断是否滑动到了开始时间(即最顶),或结束时间(即最底):

这里的loop是自己封装的 for 循环,一定要理解这里的dir到底是如何计算的。

④ 判断好dir的值之后,就需要对前面第②步生成的数据范围进行调整:

如果滑到了开始时间的分界点,需要处理min的值;

如果滑到了结束时间的分界点,需要处理max的值;

处理好后,再调用 initRangeArr 更新dom。

⑤ 在initRangeArr中更新dom之后,需要配合数据,调整好 ul 的translate3d。通过一系列的计算,得到targetLong的值,用来设置translate3d。并且同步好所有控制结果的数据,不仅仅是更新recent_timeresultArr,还需要更新 maxHeightdistance

⑥ 然后递归调用checkRange

PS:注意区分【虚拟时间】【真实时间】的下标含义哦。

【虚拟时间】的下标是指,在界面上的每个ul的下标,比如有三个ul,那么就是 [0, 1, 2];

【真实时间】的下标是指,【0:年】【1:月】【2:日】.... 以此类推。

六、自定义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』就算完成了。


写在最后

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

到此,DOM的实现和手势操作已经实现。

预知后话,后两天见分晓

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

分类:
前端
收藏成功!
已添加到「」, 点击更改