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


Posted in Javascript onDecember 21, 2016

前言

最近几个月一直在看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的选择效果在进入选择范围内和选择范围外的滚轮是有差别的

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

所以为了实现这个效果差别我选择用2个dom结构来实现,一个dom实现滚轮,一个dom实现黑色选中效果,这样联动的时候就有类似原生的效果差别

picker-panel 装各种选择dom,这里只给出了day的, box-day 装天数据的一个最外层盒子, check-line 实现选中的那2条线, day-list 最外层黑色效果数据, day-wheel 灰色滚轮部分

<div class="picker-panel">
<!--other box-->
<div class="box-day">
  <div class="check-line"></div>
  <div class="day-checked">
    <div class="day-list">
      <div class="list-div" v-for="day in renderListDay">
       {{day.value}}
      </div>
    </div>
  </div>
  <div class="day-wheel">
    <div class="wheel-div" v-for="day in renderListDay" transform: rotate3d(1, 0, 0, 80deg) translate3d(0px, 0px, 2.5rem);>
    {{day.value}}
    </div>
  </div>
</div>
<!--other box-->
</div>
.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-div{
     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);

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

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

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

如上图

是我们滚轮的效果立体图,r 就是我们 translated3d(0px,0px,2.5rem) 这条css中的2.5rem,

如果没有这句css 那么所有的数据将汇聚在圆心

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

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

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

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

蓝色弧线表示的角度是一样的(这个涉及角的知识),也是视觉旋转角度,就是rotate3d这句css里面的80deg ,我做的是每个间隔20度,这样实际我们只用旋转x轴就顺带旋转了圆心角度,这样就把整个环给铺开了。完整一个圆可以装下360/20 个数据,而我们肉眼正能看见正面的数据,所以过了一定角度就在背后应该不能被我们看见,而-webkit-backface-visibility: hidden;这句话就起了作用。

这里我们发现轮子装不完所有数据,而且我们要实现数据循环

类似下图效果

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

所以就有了第二次数据准备

数据准备2

这里也是用我们的dayList作为初始数据[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 (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];
        } 
        //...
      },

每条数据旋转的角度(上半圆是正,下半圆是负)

<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)*20%360+'deg) translate3d(0px, 0px, 2.5rem)'}">{{day.value}}{{day.value}}</div>

接着需要旋转到我们需要的角度,跟我们的初始化时间对上,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是用来记录实际移动的距离的,最后输出需要算入偏移量

<div class="box-day" v-on:touchstart="myTouch($event,'day')" v-on:touchmove="myMove($event,'day')" v-on:touchend="myEnd($event,'day')">
  <div class="check-line"></div>
  <div class="day-checked">
    <div class="day-list" data-translateY="0" style="transform: translateY(0rem)">
      <div class="list-div" v-for="day in renderListDay" v-bind:data-index="day.index">
        {{day.value}}
      </div>
    </div>
  </div>
  <div class="day-wheel" style=" transform: rotate3d(1, 0, 0,0deg)">
    <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)*20%360+'deg) translate3d(0px, 0px, 2.5rem)'}">
     {{day.value}}
    </div>
  </div>
</div>

惯性滚动

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

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

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

其他功能的实现

这里不做详细说明了

总结

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

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

已知问题

1.惯性滚动不完美

2.无限滚动实现了。非无限滚动没实现,就是渲染数据就是[1,2,3,4,5,6,7,8,9,10]

3.现在选择必须 年月日 或者年月日小时分钟 不能单独选小时或者分钟

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
详解jQuery的表单验证插件--Validation
Dec 21 #Javascript
JS无缝滚动效果实现方法分析
Dec 21 #Javascript
简单实现JS计算器功能
Dec 21 #Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 #Javascript
Bootstrap Search Suggest使用例子
Dec 21 #Javascript
简单实现Bootstrap标签页
Aug 09 #Javascript
获取JavaScript异步函数的返回值
Dec 21 #Javascript
You might like
ecshop实现smtp发送邮件
2015/02/03 PHP
php创建类并调用的实例方法
2019/09/25 PHP
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
python超简单解决约瑟夫环问题
2015/05/12 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
详解python datetime模块
2020/08/17 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
大学三年的自我评价
2013/12/25 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
初三英语教学反思
2016/02/15 职场文书