移动端效果中Picke的实现方法

<!-- 说明： 
1. 类 picker-3d 是为了提供3d视角，如果不需要可以去掉 
2. 类 picker-slot-absolute 在3d视角中需要加上，因为下面相对定位的 picker-items 是要相对父容器进行 transform的，如果不加，就会造成位移不正确 3. DOM中所有的style样式都是在初始化的时候加上的--><p class="picker picker-3d">
 <p class="picker-items">
 <p class="picker-slot picker-slot-absolute" style="flex:1;">
  <p class="picker-slot-wrapper" id="wrapper" style="height: 108px;">
  <p class="picker-item picker-selected" style="height:36px;line-height: 36px">1981</p>
  <!-- ... -->
  <p class="picker-item" style="height:36px;line-height: 36px">1999</p>
  </p>
 </p>
 </p>
 <p class="picker-center-highlight" style="height:36px;margin-top:-18px;"></p></p>

var el = document.querySelector('#wrapper');
var animationFrameId = null;
var currentValue;
var itemHeight = 36;
var visibleItemCount = 3;
var valueIndex = 0;
var rotateEffect = true;
var datas = ['1981', '1982', '1983', '...', '1999'];// 如果支持3d视角，则给<p class="picker"></p>加上类"picker-3d"// <p class="picker-slot" style="flex:1;">加上类"picker-slot-absolute"if (rotateEffect) {
 var picker = document.querySelector('.picker');
 var pickerSlot = document.querySelector('.picker-slot');
 picker.classList.add('picker-3d');
 pickerSlot.classList.add('picker-slot-absolute');}// 限定容器高度el.style.height = `${visibleItemCount * itemHeight}px`;// 生成DOMvar html = '';datas.forEach(function(data, index) {
 html += `<p class="picker-item" style="height:36px;line-height:36px;">${data}</p>`;});el.innerHTML = html;// 激活当前itemvar pickerItems = document.querySelectorAll('.picker-item');pickerItems[valueIndex].classList.add('picker-selected');

/** * draggable.js * 只是起到一定的兼容性 * 实质和直接调用 el.addEventListener('touchstart', startFn); 并没有多大差别 */// 滑动开始// touchstart 和 mousedown 可见对PC端的兼容// onselectstart/ondragstart 直接return 可见排除了拖动和选择element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
 if (isDragging) return;
 document.onselectstart = function() { return false; };
 document.ondragstart = function() { return false; };

 // ...});// 滑动结束var endFn = function(event) {
 // 注销事件
 if (!supportTouch) {
 document.removeEventListener('mousemove', moveFn);
 document.removeEventListener('mouseup', endFn);
 }
 document.onselectstart = null;
 document.ondragstart = null;

 isDragging = false;

 if (options.end) {
 options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
 }}

// 滑动开始的执行事件方法start: function(event) {
 dragState = {
 range: getDragRange(),
 // ...
 startTranslateTop: translateUtil.getElementTranslate(el).top
 };}

/** * translateUtil * 对浏览器对前缀支持的一些判断 * 检测浏览器对3d属性的支持情况 * 获取当前的translate值/清空picker的translate值/移动picker * 对于浏览器的检测方面，这也算是一个比较好的工具类 */var docStyle = document.documentElement.style;var engine;var translate3d = false;// 浏览器判断if (window.opera && Object.prototype.toString.call(opera) === '[object Opera]') {
 engine = 'presto';} else if ('MozAppearance' in docStyle) {
 engine = 'gecko';} else if ('WebkitAppearance' in docStyle) {
 engine = 'webkit';} else if (typeof navigator.cpuClass === 'string') {
 engine = 'trident';}// css前缀var cssPrefix = {
 trident: '-ms-', // IE
 gecko: '-moz-',  // FireFox
 webkit: '-webkit-', // Chrome/Safari/etc...
 presto: '-o-'  // Opera}[engine];// style前缀var vendorPrefix = {
 trident: 'ms',
 gecko: 'Moz',
 webkit: 'Webkit',
 presto: 'O'}[engine];var helpElem = document.createElement('p');var perspectiveProperty = vendorPrefix + 'Perspective';var transformProperty = vendorPrefix + 'Transform';var transformStyleName = cssPrefix + 'transform';var transitionProperty = vendorPrefix + 'Transition';var transitionStyleName = cssPrefix + 'transition';var transitionEndProperty = vendorPrefix.toLowerCase() + 'TransitionEnd';if (helpElem.style[perspectiveProperty] !== undefined) {
 translate3d = true;}// 讲一下这个正则// \s*(-?\d+(\.\d+?)?)px 这是一个单元，匹配这样的 -23.15px, 剩下的应该就好理解了var regexp = /translate\(\s*(-?\d+(\.\d+?)?)px,\s*(-?\d+(\.\d+?)?)px\)\s*translateZ\(0px\)/ig;

drag: function(event) {
 // 加上 dragging 类是为了清除过渡效果，在swiper中也有同样的应用
 el.classList.add('dragging');

 dragState.left = event.pageX;
 dragState.top = event.pageY;

 var deltaY = dragState.top - dragState.startTop;
 
 // 计算当前的滑动位移
 var translate = dragState.startTranslateTop + deltaY;

 // 滑动元素
 translateUtil.translateElement(el, null, translate);
 velocityTranslate = translate - prevTranslate || translate;

 prevTranslate = translate;

 if (rotateEffect) {
 updateRotate(prevTranslate, pickerItems);
 }}

end: function() {
 // 添加过渡
 el.classList.remove('dragging');
 // 惯性值
 var momentumRatio = 7;
 var currentTranslate = translateUtil.getElementTranslate(el).top;
 var duration = new Date() - dragState.start;

 var momentumTranslate;
 if (duration < 300) {
 momentumTranslate = currentTranslate + velocityTranslate * momentumRatio;
 }

 // 加上惯性速率之后的位移值
 console.log('momentumTranslate', momentumTranslate);

 dragRange = dragState.range;

 setTimeout(function() {
 var translate;
 if (momentumTranslate) {
  translate = Math.round(momentumTranslate / itemHeight) * itemHeight;
 } else {
  translate = Math.round(currentTranslate / itemHeight) * itemHeight;
 }

 // 取得最终的位移值，
 // 必须为itemHeight的倍数
 // 在范围的最大值和最小值中取
 translate = Math.max(Math.min(translate, dragRange[1]), dragRange[0]);
 translateUtil.translateElement(el, null, translate);

 // 计算得出当前位移下应该对应的实际值
 currentValue = translate2Value(translate);

 // 3d效果
 if (rotateEffect) {
  planUpdateRotate();
 }
 }, 10);

 dragState = {};}

[].forEach.call(items, function(item, index) {
 translateUtil.translateElement(item, null, itemHeight * index);});

var VISIBEL_ITEMS_ANGLE_MAP = {
 3: -45,
 5: -20,
 7: -15};

// 当前item相对于顶部原本应该有的位移值var itemOffsetTop = index * itemHeight; // 滑动过程中，相对于最开始的位置滑动的位移值var translateOffset = dragRange[1] - currentTranslate;// 当应该有的位移值和滑动的位移值相等的时候，也就说明了当前的`item`被选中// 也就是说此时当前的角度为0var itemOffset = itemOffsetTop - translateOffset;var percentage = itemOffset / itemHeight;var angle = angleUnit * percentage;if (angle > 180) angle = 180;if (angle < -180) angle = -180;rotateElement(item, angle);