当前位置: 首页 > Web前端 > HTML

如何创建移动端联动选择器(四)

时间:2023-04-02 19:38:13 HTML

在写MultiPicker之前写了一篇文章——“为移动端而生”的自定义多级联动选择器,受到了很多人的关注。鉴于很多人都很好奇这个手写插件的流程,所以特地写了几篇文章来说说它的成长史~看这篇文章之前,请确保你已经阅读了MultiPicker的源码~点击查看源码,也可以在npm上找到它们:DateSelector-DateSelector-NPM。自定义json选择器-MultiPicker。NPM。回顾上一集:移动端联动选择器的制作方法(一)回顾上一集:移动端联动选择器的制作方法(二)回顾上一集:移动端联动选择器的制作方法(三))六、自定义JSON选择器的联动算法思考第八个问题:“如何确定下一层的联动系列?”』因为自定义JSON的格式早先被标准化了,如果判断下一级联动的series问题转化为【如何计算下一级child的深度】的问题。我的解决方法是:迭代调用checkArrDeep判断是否存在子链接,然后计算深度。具体实现步骤如下:①先传入一个需要计算深度的对象给checkArrDeep,判断是否有children,迭代,计算深度。②生成所有子链接对应的li,更新dom,设置子链接的translate3d为(0,0,0);这一步和日期选择器根本不同,这里的子链接肯定会更新,而且所有的子链接都必须translate3d(0,0,0);PS:这里有一个小技巧,就是在更新联动之前先记录上次联动的系列。我使用ulCount来记录最后一次链接的系列。在所有的更新操作完成后,ulCount最终被更新为下一次迭代。③如果增加了联动系列数(需要ulCount来判断),给新加入的联动ul绑定一个新的触摸事件。如果链接级别降低,则清除dom。④重置联动宽度,更新计算联动使用的所有数据,包括ulCount:7。用户可以自定义回调。想想第九个问题:“如何确定用户想要什么数据格式?”』最完美的方案就是让用户自己写回调,自己解决所有的数据格式问题。用户可以在回调中拼接自己想要的字符串,也可以在后台构造自己想要的json格式。大大增加了灵活性。至此,“日期选择器-DateSelector”和“自定义json选择器-MultiPicker”就完成了。点击了解MultiPicker——自定义多级联动选择器预测Github地址:《为移动而生》自定义多级联动选择器来了,这个选择器的成长史就结束了~谢谢观看~我是家宝卖萌出家的算法少女阿碧安。