前言
最近几个月一直在看VUE，然后试着只用原生js+vue实现某些组件。
PC端时间选择组件 这是最开始实现的pc上的时间选择，平时移动端也在做，所以就想实现一下移动端的时间选择器，下面分享一下我实现移动端滚轮特效时间选择器的思路和过程。整个组件是基于vue-cli来进行构建的
功能
1.时间选择[
A.年月日选择
B.年月日小时分钟选择 C.小时分钟选择 D.分钟选择]2.滚轮效果[
A.构成一个圆环首尾相连 B.不构成首尾相连]3.时间选择范围设置(所选时间超过范围将弹窗提示)，分钟间隔设置
4.多语言设置
5.时间格式设置 满足 yyyy/MM/dd HH:mm 这一类的设置规则
6.UE上做到接近ios原生效果
7.扩展 不仅仅只能选择时间，可以传入自定义联动选择数据
这里主要讲讲无限滚轮的实现
数据准备1
这里拿
天 来做说明 获取一个月有多少天的一个巧妙的方法。
dayList () {
/* get currentMonthLenght */
let currentMonthLength = new Date(this.tmpYear, this.tmpMonth + 1, 0).getDate();
/* get currentMonth day */
let daylist = Array.from({length: currentMonthLength}, (value, index) => {
return index + 1
});
return daylist
},
这里我用了vue 的computed方法来实现，放入
yearList
monthList dayList
hourList
minuteList 来存储基础数据,这里数据准备就先告一段落。静态效果实现
实现滚轮静态效果有多种方式
1.视觉3D效果[加阴影]
2.实际3D效果[CSS3D]
我把实现效果大致分为上面2种，具体的大家可以自己搜索相关资料，这里展开涉及太多就带过好了 我自己实现是用的第二种采用了CSS3D
说明
首先我们看到原生ios的选择效果在进入选择范围内和选择范围外的滚轮是有差别的
所以为了实现这个效果差别我选择用2个dom结构来实现，一个dom实现滚轮，一个dom实现黑色选中效果,这样联动的时候就有类似原生的效果差别
picker-panel 装各种选择dom，这里只给出了day的，
