模仿原生ios时间选择组件的vue.js实现的示例代码

时间：2021-09-06 来源：互联网编辑：宝哥软件园浏览：次

序

最近几个月我一直在关注VUE，然后尝试只使用原生js vue实现一些组件。

Pc端时间选择组件这是PC上的初始时间选择，平时也是移动终端做的，所以我想在移动终端上实现时间选择器。分享一下我在移动终端滚轮特效上实现时间选择器的思路和过程。整个组件是基于vue-cli构建的

功能

1.时间选择[a .年，月，日，b .年，日，时，分，c .小时，分，d .分]

2.滚子效应[A .形成一个端到端的环b .不要形成端到端]

3.设置时间选择范围(当所选时间超出范围时弹出提示)，并设置分钟间隔

4.多语言设置

5.时间格式设置符合yyyy/mm/DD HH: mm的设置规则。

6.6日接近ios原生效果。用户体验(User Experience)

7.扩展不仅可以选择时间，还可以传入自定义的联动选择数据

这里主要讲一下无限滚轮1的实现数据准备

这里，以天空为例

计算一个月天数的聪明方法。

dayList () { /*获取当前月长度*/让当前月长度=新日期(this.tmpYear，this.tmpMonth 1，0)。getDate()；/* get current month day */let day list=array . from({ length : current month length }，(value，index)={ return index 1 })；返回daylist}，这里我用vue的计算方法来实现，放入年表月表日表小时表分钟表来存储基础数据，这里的数据准备会先结束。

静态效果实现

有许多方法可以实现滚筒的静态效果

1.视觉3D效果[阴影]

2.实际3D效果[CS3D]

我把实现效果大致分为以上两种。具体的人可以自行搜索相关信息。如果这里牵扯太多，也没关系。

我自己意识到了，第二个采用了CSS3D

解释

首先我们看到，进入选择范围的滚轮和选择范围外的滚轮，原生ios的选择效果是不一样的

所以为了实现这种效果差异，我选择使用两个dom结构，一个dom实现滚轮，一个dom实现黑色选择效果，这样在链接的时候就有了类似的原始效果差异。

Picker-panel配备了多种选择的dom。这里，只给出了一天中最外层的一盒日数据。check-line实现了选中的两条线，日历表最外面的黑色效果数据，日轮的灰色滚轮部分。

div class='picker-panel '！-other box-div class=' box-day ' div class=' check-line '/div class=' day-checked ' div class=' day-list ' div class=' list-div ' v-for=' renderListDay中的一天' { day . value } }/div/div/div class=' day-wheel ' div ' v-for=' renderListDay中的一天' transform: rotate3d(1，0，0，80deg) translate3d(0px，0px{{day.value}} /div /div/div！-其他箱-/div . day-wheel { position : absolute；飞越：可见；height : px 2 rem(68px)；font-size : px 2 rem(36px)；top : px 2 rem(180 px)；left : 0；right : 0；color: $未检查日期；-web kit-transform-style : preserve-3d；transform-style : preserve-3d；wheel-div { height : px 2 rem(68px)；line-height : px 2 rem(68px)；绝对位置：top:0宽度： 100%；文本对齐：中心；-web kit-back face-visibility :隐藏；背面-可见性：隐藏；white-space : nowrap；飞越：隐藏；文本-overflow:省略号；}}主要涉及的css属性

transform-style : preserve-3d；

显示3D效果，

-web kit-back face-visibility :隐藏；

滚轮的后部会自动隐藏

postition:absolute

用于定位车轮

transform: rotate3d(1，0，0，80deg) translate3d(0px，0px，2.5 rem)；

每个数据的旋转角度和车轮侧视图圆的半径

每个数据旋转的角度和构造原理

上图

是我们滚轮的透视图，在我们的css translated3d(0px，0px，2.5rem)中r是2.5rem。

如果没有这个css，所有的数据都将聚集在圆心

上图不旋转(红色代表我们看到的数据效果)

上图是旋转的(红色和橙色代表我们看到的数据效果)

蓝色弧线代表的角度是一样的(这涉及到角度的知识)，也是视觉旋转角度，也就是rotate3d的css中的80度。我做的是每个间隔20度，所以我们实际上只是通过旋转X轴来顺便旋转中心角，从而展开整个环。一个完整的圆可以容纳360/20的数据，我们肉眼可以看到正数据，所以一定角度后，后面应该不会被我们看到，还有-WebKit-back face-Visibility : Hidden；这句话起到了作用。

在这里我们发现轮子不能容纳所有的数据，我们必须实现数据循环

类似于下面的效果

所以还有第二个数据准备

数据准备2

我们的日列表也用作这里的初始数据[1，2，3，4， 30, 31]

这里，我们一次取19个数据作为渲染数据，我们需要renderListDay的初始渲染为[23，24，25，26，27，28，29，30，31，1，2，3，4，5，6，7，8，9，10]

因为中间的数字只是第一个(仅在初始化时)

renderListDay(){ let list=[]；for(让k=this . spin . day . head；k=this . spin . day . last；k){ let obj={ value : this . getdata(k，' day ')，index: k，}；List.push(obj)} return list}，取数据的方法小于0，当索引大于原始数据长度时取，正常范围对应的索引按%计算，所以上面的旋转是我们取数据的分叉(最初从-9到9)

getData(idx，type){ //.else if(type==' day '){ return this . day list[idx % this . day list . length=0？idx % this . DayLiST . length : idx % this . DayLiST . length this . DayLiST . length]；}//.}，每条数据的旋转角度(上半圆为正，下半圆为负)

div class=' wheel-div ' v-for=' day in renderListDay ' v-bind : data-index=' day . index ' v-bind : style=' { transform : ' rotate3d(1，0，0，(-day。index)* 2060 ' deg)translate 3d(0px，0px，2.5rem)'}' {{day。value}} {{day。然后需要将value}}/div旋转到我们需要的角度，这个角度与我们的初始化时间，即。周日-这个。日列表

这个。$ El . getelementsbyclassname(' day-wheel ')[0]. style . transform=' rotate3d(1，0，0 '，(this . orday-this . day list[0])* 20 ' deg '；添加触摸事件

剩下的就好办了，对应的dom绑定事件根据touchmove的距离转换成旋转角度和检查表位移。这里用translateY记录实际移动距离，最后输出需要包含在偏移量中。

div class=' box-day ' v-: touch start=' myTouch($ event，' day ')' v-: touch move=' my move($ event，' day ')' v-: touch end=' myEnd($ event，' day ')' div class=' check-line '/div class=' day-checked ' div class=' day-list ' data-translateY=' 0 ' style=' transform : translateY(0rem)' div class=' list-div ' vindex)* 2060 ' deg)translate 3d(0px，0px，2.5rem)'}' {{day。value}}/div/div惯性滚动

我用三次贝塞尔曲线(0.19，1，0.22，1)实现了这一点。

确定手势是否闪烁。如果是闪烁，通过一个瞬时速度计算位移和时间，然后设置一次，然后用过渡做惯性滚动，普通拖动设置1秒

这个实际效果还是有点差，以后会改善的。

其他职能的执行

这里就不详细解释了

摘要

在适配方面，采用了手洗的解决方案

实现这个组件最难的是实现无限滚动和为无限滚动构建渲染数据，其次是实现惯性滚动。

已知问题

1.惯性滚动是不完美的

2.实现了无限滚动。不实现非无限滚动，即渲染数据为[1，2，3，4，5，6，7，8，9，10]

3.现在你必须选择年、月、日、小时和分钟。您不能单独选择小时或分钟