在写MultiPicker之前写了一篇文章——“为移动端而生”的自定义多级联动选择器，引起了很多人的关注。鉴于很多人都很好奇这个手写插件的流程，所以特地写了几篇文章来说说它的成长史~看这篇文章之前，请确保你已经阅读了MultiPicker的源码~点击查看源码，也可以在npm上找到它们：DateSelector-DateSelector-NPM。自定义json选择器-MultiPicker。NPM。回顾上一集：移动端联动选择器的制作方法（一）二、弹窗层的实现&DOM小技巧思考第三个问题：《如何实现弹窗层，让插件兼容》框架多了，风格就万无一失了？”』弹出层的实现思路：【插入DOM→初始化联动数据→绑定事件】①在插入DOM部分（initDomFuc），通过字符串拼接的方式插入DOM（而不是使用字符串模板）。linkage的主要结构式如下：每一个linkage是一个div，div包裹着一个ul，ul中的每一个li就是linkage的值。div的高度是5lis的高度，ul的高度是所有lis高的实际高度。②在初始化联动数据（initReady）部分，在首尾分别插入两个空字符，可以作为占位符，计算手势的translate3d时更方便。③在为DOM元素绑定事件时，具体有两个步骤：第一步：为每个初始化的ul(initReady)绑定触摸事件；第二步：为一些操作按钮绑定事件（initBinding）。③-第一步：触摸事件的类型无非是touchstart、touchmove和touchend。但是每次滑动都需要记录一些数据。这是为了达到滑动加速的效果，下面会讲到。③-第二步：我在自己封装的上使用了一个简单的事件监听函数：该函数主要用在【触发】、【取消】、【提交】等重要按钮上。PS：在设计样式的过程中，考虑到大部分场景都会用到【年月日时分】这五个时间单位。为了优化界面和用户体验，在日期选择器的设计中，需要设计一个标签切换效果的完整版日期选择器。它不会出现在其他场景中。3、加速的实现思考第四个问题：“如何判断滑动的手势，让滑动有加速？”』我发现无论用户使用哪根手指，只要用户在短时间内的滑动弧长比较大，就说明用户想要快速向上滑动或者向下滑动。比如在选择出生年份的时候，用户肯定会想快速滑动到上方，会用非常快的手势，向下滑动一个比较大的弧长。这时候应该会有滑动加速的效果。那么如何实现，如何判断用户想要快速滑动呢？很简单，只需要考虑单位时间内速度的变化率，也就是加速度。之前说过，在touchmove的过程中，会有一个【速度数组】用来存储滑动时手势的速度。并调用touchend中的initSpeed函数来确定最后一个transition-duration的值。initSpeed的主要工作是计算speed中的速度方差，方差和加速度是正相关的。因此，当方差大于0.1时，ul的实际滑动距离为手势滑动距离的两倍，transition-duration的值为0.2s；当方差小于0.1时，认为基本上是均匀的滑动距离，ul的实际滑动距离等于Gesture滑动距离，取speed[0]为transition-duration的值。确定滑动距离后，就可以计算出最后的位置translate3d(initPosition)。基本实现了滑动加速的效果。Github地址：《为移动端而生》自定义多级联动选择器至此，dom的操作和手势算法已经基本掌握。预示会发生什么，过两天再见。我是加宝阿皮安，一个可爱的算法少女出家了。
