html5 实现ios原生控件,vue.js实现仿原生ios时间选择组件开发经验

编程入门行业动态更新时间:2024-10-24 15:13:09

前言

最近几个月一直在看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 的puted方法来实现，放入yearListmonthList

dayListhourListminuteList

来存储基础数据,这里数据准备就先告一段落。

静态效果实现

实现滚轮静态效果有多种方式

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

2.实际3D效果[CSS3D]我把实现效果大致分为上面2种，具体的大家可以自己搜索相关资料，这里展开涉及太多就带过好了

我自己实现是用的第二种采用了CSS3D

说明

首先我们看到原生ios的选择效果在进入选择范围内和选择范围外的滚轮是有差别的{{day.value}}

.day-wheel{ position: absolute; overflow: visible; height: px2rem(68px); font-size: px2rem(36px); top:px2rem(180px); left: 0; right: 0; color:$unchecked-date; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; .wheel-p{ height: px2rem(68px); line-height: px2rem(68px); position: absolute; top:0; width: 100%; text-align: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

主要涉及的css属性transform-style: preserve-3d;

展示3D效果，-webkit-backface-visibility: hidden;

滚轮背后部分自动隐藏postition:absolute;

用来定位轮子transform: rotate3d(1, 0, 0, 80deg) translate3d(0px, 0px, 2.5rem);

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

每个数据旋转的角度和构造原理renderListDay(){ let list = []; for (let 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倒着取大于0正着取,索引大于原始数据长度都用%计算来获得正常范围对应的索引，所以上面的spin 就是我们的取数据的叉子(初始是从-9到9)getData(idx, type){ //... else if (type == 'day') { return this.dayList[idx % this.dayList.length >= 0 ? idx % this.dayList.length : idx % this.dayList.length + this.dayList.length]; } //... },

每条数据旋转的角度(上半圆是正，下半圆是负){{day.value}}{{day.value}}

接着需要旋转到我们需要的角度，跟我们的初始化时间对上,this.orDay-this.DayList[0] 是获取偏移量来矫正角度this.$el.getElementsByClassName('day-wheel')[0].style.transform = 'rotate3d(1, 0, 0, ' + (this.orDay - this.dayList[0]) * 20 + 'deg)';

增加touch事件

剩下的事就很好处理了，给对应的dom绑定事件根据touchmove的距离来转换成旋转的角度和check-list的位移这里translateY是用来记录实际移动的距离的，最后输出需要算入偏移量{{day.value}}

惯性滚动

这个实现我是用了一个 cubic-bezier(0.19, 1, 0.22, 1)

判断手势是不是flicker 如果是flicker通过一个瞬时速度来算出位移，和时间，然后一次性设置，然后用transition做惯性滚动,

普通拖动设置1秒

这个实际效果还是有点不好，以后来改进。

其他功能的实现

这里不做详细说明了

总结

自适应方面用了手淘的解决方案

这次实现这个组件最困难的就是实现无限滚动，和无限滚动的渲染数据的构造，接着就是惯性滚动的实现。