Article From:https://www.cnblogs.com/024-faith/p/ios-timer.html

1. Causes

 

plug-in relies on better-scroll and vue, and the installation process is as follows:

step1:  npm install vue -D
step2:  npm install better-scroll -D
step3:  npm install vue-ios-timer -D
step4:  import vueIosTimer from 'vue-ios-timer';
step5:  vue.use(vueIosTimer); 

Github”

5. Realization Thoughts

1″ generation year, month, day, hour, five arrays, according to plug-in attribute type (optional value is date, date time, time), initialize timeList two-dimensional array, and initialize the initial value;

initBasicData(){

	for(let i=1900; i<=2100; i++){
		this.years.push(i+'Year);}For (let I = 0; I & lt; 60; I + +) {If (i & gt; 0 & amp; & amp; I & lt; = 12) {This. monthes. push (String)PadStart (2,'0') +'month';}If (i & gt; 0 & amp; & amp; I & lt; = 31) {This. days. push (String (i). padStart2,'0'+'day';}If (i< 24) {This. hours. push (String (i). padStart (2,'0') +'time');}This.minuteS. push (String (i). padStart (2,'0') +'points');}// When type = date and has default valuesIf (this.type =='date'& & amp; t)His.datex) {Let y = new Date (this. datex). getFullYear ();Let m = new Date (this. datex). getMonth ();Let d = new Date (this. datex). getDate ();This.timerSelectIndex = y-1900, m, d-1;// When type = datEtime and has default values} else if (this.type =='datetime'& & amp; this.datetimex){Let y = new Date (this.d)Atetimex. getFullYear ();Let m = new Date (this. datetimex). getMonth ();Let d = new Date (this.da)Tetimex. getDate ();Let H = new Date (this. datetimex). getHours ();Let min = new Date (this. datetim)GetMinutes ();This.timerSelectIndex = [y-1900, m, d-1, h, min];// When type = time and has default values}else if(this.type=='time'& & amp; this.timex) {Let H = Number (this. timex. split (':') [0]);Let min=Number (this. timex. split (':') [1]);This.timerSelectIndex = [h, min];}else{// When there is no default valueThisTimerSelectIndex = 0,0,0,0,0];}}InitTimeList (){If (this.type =='datetime') {This. timeListPush (this. years);This. timeList. push (this. monthes);This. timeList. push (this. days);This.timeLIst. push (this. hours);This. timeList. push (this. minutes);} else if (this.type =='time') {This.timEList. push (this. hours);This. timeList. push (this. minutes);}else {This. timeList. push (this. years));This. timeList. push (this. monthes);This. timeList. push (this. days);}}

 

initScroll(){
	// Loop Initialization of Multiple ListsIf (! This. $refs. timerWrapper) {Return}Let timerWrapper = this. $refs. timerWrapper;For (let I = 0; I & lt; timerWrapper. children. length; I + +) {Let wheel = new Bscroll (timerWrapper.child)Ren[i], {Wheel: {Rotate: 25,SelectedIndex: this.timerSelectIndex [i],WheelWrappeRClass:'wheel-scroll',When ItemClass:'wheel-item'}ProbeType: 3};This.wheelS. push (wheel);}// Listen for scrollEnd events, and when the scroll ends, re-render the list of daysThis. wheels. forEach ((wheel, i)=>{Wheel.oN ('scrollEnd', (pos) => {If ((this.type =='date'| | this.type =='datetime') & amp; & amp; i!= 2) {Let year = 1900 + this. wheels [0]. getSelected Index ();Let month = this. wheels [1]. getSelEctedIndex ()+1;Let new Days = this. getDays (Number (year), Number (month);This. $set (this. time)List, 2, new Days;This. wheels [2]. refresh ();}}}}GetDays (year, month) {// Appropriate according to year and monthDays of monthLet is LeapYear = year% (400 = 0) | | (year% = 4 = 0 & amp; & amp; year% = 100!= 0);Let bigMonThes = 1,3,5,7,8,10,12;Let is BigMonth = bigMonthes. indexOf (month) & gt; - 1;Let days = [];For(let I = 1; I & lt; = 31; I +) {Days. push (String (i). padStart (2, "0"+'day');}If (is BigMonth) {ReturnDays;Other if (isLeapYear & amp; & amp; month = 2) {Return days. splice (1,29);} else if (! IsLeapYea)R & amp; & amp; month = 2) {Return days. splice (1,28);}else{Return days. splice (1,30);}}

 

  3)  When all the scrolling operations of the user are finished, the result of the selection needs to be exposed by sending getTime events.

   getIndex(){
	// Returns the selected valueLet indexes = [], result =';This. wheels. forEach (wheel=>{Index. push (wheel. getSelec)TedIndex ())};If (indexes. length = 3 | | indexes. length = 5) {Index = indexes. map ((item, i)=> {If (i==0) {Item = 1900 + item;} else if (i==1 | | i==2) {Item = String (item + 1). padSTart (2,'0');}else{Item = String (item). padStart (2,'0');}Return item;}}else{Indexes = indexes. map ((item, i) = & gt; {Item = String (item). padStart (2,'0');Return item;}}If (indexes. length = 2) {Result = indexes. join (':');} Other if (indexes. length = 3) {Result =Indexes. join ('-');}else{Result = `${indexes [0]} - ${indexes [1]} - ${indexes [2]} ${indexes [3]}: ${inDexes[4]}`;}This. showTimer = false;This. $emit ('getTime', result);}

 

Link of this Article: Ios-style time selection plug-in