@feidao-msz/wheel-picker/dist/wheel.min.js

仿 iOS UIPickerView 的滚动选择器

/*!
 * 	Wheel v1.0.201910161500
 * 	https://cople.github.io/WheelPicker
 * 	Licensed under the MIT License
 */
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Wheel=e():t.Wheel=e()}(this,function(){return function(t){function e(s){if(i[s])return i[s].exports;var n=i[s]={exports:{},id:s,loaded:!1};return t[s].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";function s(t,e){this.container="string"==typeof t?document.querySelector(t):t,this.data=[],this.items=[],this.y=0,this.selectedIndex=0,this.isTransition=!1,this.isTouching=!1,this.easings={scroll:"cubic-bezier(0.23, 1, 0.32, 1)",scrollBounce:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",bounce:"cubic-bezier(0.165, 0.84, 0.44, 1)"},this.options=n.extend({data:[],rows:5,rowHeight:34,adjustTime:400,bounceTime:600,momentumThresholdTime:300,momentumThresholdDistance:10},e),this.options.rows%2===0&&this.options.rows++,this.pointerEvents="ontouchstart"in window?{start:"touchstart",move:"touchmove",end:"touchend",cancel:"touchcancel"}:{start:"mousedown",move:"mousemove",end:"mouseup",cancel:"mouseleave"},this.transformName=n.prefixed("transform"),this.transitionName=n.prefixed("transition"),this.transitionendName={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionEnd",msTransition:"MSTransitionEnd",OTransition:"oTransitionEnd",transition:"transitionend"}[this.transitionName],this._init()}var n=i(1);s.prototype={_init:function(){this._createDOM(),this._bindEvents()},_createDOM:function(){this.wheel=document.createElement("div"),this.wheel.className="wheelpicker-wheel",this.scroller=document.createElement("ul"),this.scroller.className="wheelpicker-wheel-scroller",this.setData(this.options.data,this.options.value),this.wheel.style.height=this.options.rowHeight*this.options.rows+"px",this.scroller.style.marginTop=this.options.rowHeight*Math.floor(this.options.rows/2)+"px",this.wheelHeight=this.wheel.offsetHeight,this.wheel.appendChild(this.scroller),this.container.appendChild(this.wheel)},_momentum:function(t,e,i,s,n,o,r){var h,a,l=t-e,c=Math.abs(l)/i;return o=void 0===o?6e-4:o,h=t+c*c/(2*o)*(l<0?-1:1),a=c/o,h=Math.round(h/r)*r,h<s?(h=n?s-n/2.5*(c/8):s,l=Math.abs(h-t),a=l/c):h>0&&(h=n?n/2.5*(c/8):0,l=Math.abs(t)+h,a=l/c),{destination:Math.round(h),duration:a}},_resetPosition:function(t){var e=this.y;return t=t||0,e>0&&(e=0),e<this.maxScrollY&&(e=this.maxScrollY),e!==this.y&&(this._scrollTo(e,t,this.easings.bounce),!0)},_getClosestSelectablePosition:function(t){var e=Math.abs(Math.round(t/this.options.rowHeight));if(!this.data[e].disabled)return t;for(var i=Math.max(e,this.data.length-e),s=1;s<=i;s++){if(!this.data[e+s].disabled){e+=s;break}if(!this.data[e-s].disabled){e-=s;break}}return e*-this.options.rowHeight},_scrollTo:function(t,e,i){return this.y===t?(this._scrollFinish(),!1):(this.y=this._getClosestSelectablePosition(t),this.scroller.style[this.transformName]="translate3d(0,"+this.y+"px,0)",void(e&&e>0?(this.isTransition=!0,this.scroller.style[this.transitionName]=e+"ms "+i):this._scrollFinish()))},_scrollFinish:function(){var t=Math.abs(this.y/this.options.rowHeight);this.selectedIndex!=t&&(this.items[this.selectedIndex].classList.remove("wheelpicker-item-selected"),this.items[t].classList.add("wheelpicker-item-selected"),this.selectedIndex=t,this.options.onSelect&&this.options.onSelect(this.data[t],t))},_getCurrentY:function(){var t=n.getStyle(this.scroller,this.transformName).match(/-?\d+(\.\d+)?/g);return parseInt(t[t.length-1])},_start:function(t){t.preventDefault(),this.data.length&&(this.isTransition&&(this.isTransition=!1,this.y=this._getCurrentY(),this.scroller.style[this.transformName]="translate3d(0,"+this.y+"px,0)",this.scroller.style[this.transitionName]=""),this.startY=this.y,this.lastY=t.touches?t.touches[0].pageY:t.pageY,this.startTime=Date.now(),this.isTouching=!0)},_move:function(t){if(!this.isTouching)return!1;var e=t.changedTouches?t.changedTouches[0].pageY:t.pageY,i=e-this.lastY,s=this.y+i,n=Date.now();return this.lastY=e,(s>0||s<this.maxScrollY)&&(s=this.y+i/3),this.y=Math.round(s),this.scroller.style[this.transformName]="translate3d(0,"+this.y+"px,0)",n-this.startTime>this.momentumThresholdTime&&(this.startTime=n,this.startY=this.y),!1},_end:function(t){if(!this.isTouching)return!1;var e,i,s=Date.now()-this.startTime,n=this.options.adjustTime,o=this.easings.scroll,r=Math.abs(this.y-this.startY);return this.isTouching=!1,s<this.options.momentumThresholdTime&&r<=10&&t.target.classList.contains("wheelpicker-item")?(this._scrollTo(t.target._wsIdx*-this.options.rowHeight,n,o),!1):void(this._resetPosition(this.options.bounceTime)||(s<this.options.momentumThresholdTime&&r>this.options.momentumThresholdDistance?(e=this._momentum(this.y,this.startY,s,this.maxScrollY,this.wheelHeight,7e-4,this.options.rowHeight),i=e.destination,n=e.duration):i=Math.round(this.y/this.options.rowHeight)*this.options.rowHeight,(i>0||i<this.maxScrollY)&&(o=this.easings.scrollBounce),this._scrollTo(i,n,o)))},_transitionEnd:function(){this.isTransition=!1,this.scroller.style[this.transitionName]="",this._resetPosition(this.options.bounceTime)||this._scrollFinish()},_bindEvents:function(){this.wheel.addEventListener(this.pointerEvents.start,this._start.bind(this)),this.wheel.addEventListener(this.pointerEvents.move,this._move.bind(this)),this.wheel.addEventListener(this.pointerEvents.end,this._end.bind(this)),this.wheel.addEventListener(this.pointerEvents.cancel,this._end.bind(this)),this.scroller.addEventListener(this.transitionendName,this._transitionEnd.bind(this))},getData:function(){return this.data},setData:function(t,e){var i=e||(t&&t.length?t[0].value||t[0]:null);this.items=[],this.scroller.innerHTML="",this.data=t.map(function(t,e){var s=document.createElement("li");return s.className="wheelpicker-item",t="object"==typeof t?t:{text:t,value:t},t.disabled&&(s.className+=" wheelpicker-item-disabled"),t.value===i&&(s.className+=" wheelpicker-item-selected",this.selectedIndex=e),s._wsIdx=e,s.innerHTML=t.text,this.items.push(s),this.scroller.appendChild(s),t},this),this.y=this.selectedIndex*-this.options.rowHeight,this.scroller.style[this.transformName]="translate3d(0,"+this.y+"px,0)",this.maxScrollY=-this.options.rowHeight*(this.data.length-1)},getSelectedItem:function(){return this.data[this.selectedIndex]},getValue:function(){var t=this.getSelectedItem();return t?t.value:null},setValue:function(t,e){for(var i,s,n=0,o=this.data.length;n<o;n++)if(s=this.data[n],s.value===t){s.disabled||(i=n);break}return i>=0&&this._scrollTo(i*-this.options.rowHeight,e?0:this.options.adjustTime,this.easings.scroll),i}},t.exports=s},function(t,e){"use strict";t.exports={extend:Object.assign||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);return t},prefixed:function(t){var e,i=document.createElement("div").style,s=["Webkit","Moz","ms","O"];if(t in i)return t;for(var n=0,o=s.length;n<o;n++)if(e=s[n]+t.charAt(0).toUpperCase()+t.substring(1),e in i)return e;return null},getStyle:function(t,e){return e=e.replace(/([A-Z])/g,"-$1"),e=e.toLowerCase(),window.getComputedStyle(t,null).getPropertyValue(e)},isArray:Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)}}}])});