PC端时间选择组件

前言

这两天多少个月直接在看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.扩展 不止只好选用时间,能够流传自定义联合浮动选取数据

此处最首要讲讲Infiniti滚轮的达成
数码筹算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 ``monthListdayList hourList ``minuteList来积累基础数据,这里数据打算就先告一段落。

静态效果达成

兑现滚轮静态效果有种种主意

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

2.实际3D效果[CSS3D]

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

本身自个儿达成是用的第三种选择了CSS3D

说明

第一大家看出原生ios的抉择效果在踏入选拔范围内和抉择范围外的滚轮是有出入的

图片 1

因此为了落到实处那几个效应差异小编采取用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);

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

各类数据旋转的角度和组织原理

图片 2

如上图

是我们滚轮的意义立体图,r 正是咱们 translated3d(0px,0px,2.5rem) 这条css中的2.5rem,

若果未有那句css 那么富有的数额将聚合在圆心

图片 3 

上海教室 不做旋转(紫水晶色表示大家看到的数量效果)

 图片 4

上海体育场合 做了旋转(宝蓝 丁香紫代表大家见到的数额效果)

青白弧线表示的角度是平等的(那几个关系角的知识),也是视觉旋转角度,正是rotate3d那句css里面包车型客车80deg ,笔者做的是种种间隔20度,那样实在大家只用旋转x轴就顺手旋转了圆心角度,这样就把全副环给铺开了。完整二个圆能够装下360/十几个数据,而作者辈肉眼正能看见正面包车型地铁数码,所以过了确定角度就在私行应该不能够被我们看见,而-webkit-backface-visibility: hidden;那句话就起了成效。

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

就疑似下图效果

图片 5

于是就有了第三遍数据谋算

数据准备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)*2060 '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)*2060 'deg) translate3d(0px, 0px, 2.5rem)'}">
     {{day.value}}
    </div>
  </div>
</div>

惯性滚动

以此达成自己是用了二个 cubic-bezier(0.19, 1, 0.22, 1)

认清手势是还是不是flicker 假设是flicker通过二个一晃进度来算出位移,和时间,然后贰遍性设置,然后用transition做惯性滚动,
万般拖动 设置1秒

其一实效依然略微倒霉,未来来立异。

任何功用的达成

那边不做详细表达了

总结

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

这一次达成那几个组件最辛劳的就是贯彻Infiniti滚动,和最棒滚动的渲染数据的构造,接着便是惯性滚动的贯彻。

已知难点

1.惯性滚动不全面

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

3.现行反革命采取必得 年月日 恐怕年月日小时分钟 不可能独立选小时大概分钟

如上正是本文的全部内容,希望对大家的求学抱有帮忙,也愿意我们多多补助脚本之家。

你大概感兴趣的小说:

  • vue时间格式化实例代码
  • 详解vue2.0的Element UI的表格table列时间戳格式化
  • vue.js将时刻戳转化为日期格式的达成代码
  • vue2.0贯彻倒计时的插件(时间戳 刷新 跳转 都不影响)
  • vue.js将unix时间戳转变为自定义时间格式
  • vue2.0 自定义日期时间过滤器
  • vue将时间戳转变来自定义时间格式的不二诀窍
  • vue.js实现格式化时间并每秒更新展现效果示例

本文由金沙澳门官网-www.js333com-金沙js333com发布于金沙澳门官网计算机,转载请注明出处:PC端时间选择组件

您可能还会对下面的文章感兴趣: