Vue. js Implementation of native ios Time Selection Component development experience

Preface I have been watching VUE for the past few months. Then I tried to use native js + vue to implement some components. PC-side Time Selection Component this is the time selection on the pc that was initially implemented. It is also done on the mobile end at ordinary times, so I want to implement the time selector on the Mobile End, next, I will share with you the idea and process of implementing the time selector for the special effect on the mobile scroll wheel. The entire component is built based on vue-cli. 1. Time Selection Preface

I have been watching VUE for the past few months, and then I tried to use native js + vue to implement some components.

PC-side Time Selection Component this is the time selection on the pc that was initially implemented. It is also done on the mobile end at ordinary times, so I want to implement the time selector on the Mobile End, next, I will share with you the idea and process of implementing the time selector for the special effect on the mobile scroll wheel. The entire component is built based on vue-cli.

Function

1. Select time [

A. Select year, month, and day

B. Select year, month, day, hour, and minute

C. Select D. minute in the hour]

2. scroll wheel effect [

A. forming A ring connected at the beginning and end

B. does not constitute a connection between the beginning and end]

3. Set the time selection range (a window is displayed when the selected time exceeds the range), and set the minute interval.

4. Multilingual settings

5. The time format settings meet the rules of yyyy/MM/dd HH: mm.

6. The native Effect of ios is similar to that of UE.

7. The extension can not only select time, but also pass in custom association to select data.

Here we will talk about the implementation of the infinite scroll wheel.

Data Preparation 1

Here

Days

Instructions

A clever way to get how many days a month has.

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      },

Here I use the computed method of vue to implement, put

yearList

monthList

DayList

hourList

minuteList

To store basic data. The data preparation is coming to an end.

Static effect implementation

There are multiple ways to achieve the roller static Effect

1. 3D visual effects [add shadow]

2. Actual 3D effects [CSS3D]

I have roughly divided the implementation effect into the above two types. You can search for the relevant information by yourself. If there is too much involved here, it will be better.

My own implementation is the second method using CSS3D.

Description

First, we can see that the selection effect of native ios is different between the selection range and the selection range.

  
  
  
    
      
       {{day.value}}      
    
  
  
    
    {{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 attributes

transform-style: preserve-3d;

Demonstrate 3D effects,

-webkit-backface-visibility: hidden;

Hide part of scroll wheel automatically

postition:absolute;

Used to locate the wheel

transform: rotate3d(1, 0, 0, 80deg) translate3d(0px, 0px, 2.5rem);

The Rotation Angle of each data and the radius of the scroll wheel side view circle

Angle and construction principle of each data Rotation

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      },

The data retrieval method is less than 0. If the index is greater than the original data length, % is used to obtain the index corresponding to the normal range, therefore, the spin above is the data-collecting fork (initially from-9 to 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];        }         //...      },

The Rotation Angle of each data record (the upper half circle is positive, and the lower half circle is negative)

{{day.value}}{{day.value}}

Next we need to rotate to the angle we need, and to our initialization time, this. orDay-this.DayList [0] is to get the offset to correct the angle

this.$el.getElementsByClassName('day-wheel')[0].style.transform = 'rotate3d(1, 0, 0, ' + (this.orDay - this.dayList[0]) * 20 + 'deg)';

Add touch events

The rest is well handled. The corresponding dom binding event is converted to the Rotation Angle Based on the touchmove distance and the check-list displacement. Here the translateY is used to record the actual movement distance, the final output must be included in the offset.

  
  
    
      
        {{day.value}}      
    
  
  
    
     {{day.value}}    
  

Inertial Rolling

In this implementation, I used a cubic-bezr (0.19, 1, 0.22, 1)

Determine if the gesture is a QR code. If the gesture is a QR code, the instantaneous speed is used to calculate the displacement and time, and then the time is set at one time. Then, the transition is used for inertial rolling,

Set normal drag to 1 second

The actual effect is still a little poor and will be improved later.

Implementation of other functions

I will not describe it in detail here

Summary

The mobile Taobao solution is used for self-adaptation.

The most difficult thing to implement this component this time is to implement the infinite rolling and the construction of the infinite rolling rendering data, followed by the implementation of inertial rolling.

Known issues

1. Imperfect inertial Rolling

2. Implement unlimited scrolling. Non-infinite scrolling is not implemented, that is, rendering data is [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].

3. Now you must select the year, month, day, year, month, hour, and minute. You cannot select the hour or minute separately.

The above is the details about how vue. js achieves native ios-like Time Selection Component development experience. For more information, see other related articles in the first PHP community!