當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

移动端效果之Picker

發(fā)布時(shí)間：2023/12/20 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了移动端效果之Picker 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

寫在前面

接著前面的移動端效果的研究，這次來看看picker選擇器的實(shí)現(xiàn)原理

移動端效果之Swiper

移動端效果之CellSwiper

移動端效果之IndexList

代碼看這里：github

1. 核心解析

1.1 基本HTML結(jié)構(gòu)

<div class="picker picker-3d"><div class="picker-items"><div class="picker-slot picker-slot-absolute" style="flex:1;"><div class="picker-slot-wrapper" id="wrapper" style="height: 108px;"><div class="picker-item picker-selected" style="height:36px;line-height: 36px">1981</div><div class="picker-item" style="height:36px;line-height: 36px">1999</div></div></div></div><div class="picker-center-highlight" style="height:36px;margin-top:-18px;"></div> </div>

1.2 初始化DOM

由于餓了么源碼中的picker是采用v-for指令生成的DOM，因此我這里只是簡單的用javascript來模擬一下DOM的生成。

1.3 初始化事件

總體上來說，picker的事件也包括滑動開始、滑動中、滑動結(jié)束。因?yàn)楫吘故且苿佣?#xff0c;滑動不可避免。這次，源碼中的對滑動事件進(jìn)行了封裝，兼容了PC端以及排除了拖動和選擇造成的影響，具體看一下分析。`

/** * draggable.js * 只是起到一定的兼容性* 實(shí)質(zhì)和直接調(diào)用 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; };// ... });// 滑動結(jié)束 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);} }

要是DOM跟隨自己在手機(jī)屏幕上的滑動而滑動，方法大同小異，無非就是在開始滑動記錄開始位置，滑動中實(shí)時(shí)計(jì)算位移，滑動結(jié)束之后將DOM滑動應(yīng)該滑動的位置。這點(diǎn)可以參看前面一篇文章移動端效果之Swiper，這篇文章中有著相同的方法。這里重點(diǎn)講一下其中的區(qū)別

// 滑動開始的執(zhí)行事件方法 start: function(event) {dragState = {range: getDragRange(),// ...startTranslateTop: translateUtil.getElementTranslate(el).top}; }

這其中有兩個(gè)方法，第一個(gè)getDragRange和第二個(gè)getElementTranslate(el).

第一個(gè)函數(shù)的作用是獲取picker能夠滑動的最小和最大的位移，這將會在滑動結(jié)束事件中用到。關(guān)于如何計(jì)算，這里簡單提一下，向下滑動，最大不能超過最中間的item的最上方，這也就是為什么itemHeight * Math.floor(visibleItemCount / 2)，而向上滑動，最大不能超過中間item的最下方，-itemHeight * (valuesLength - Math.ceil(visibleItemCount / 2))，細(xì)細(xì)想一下就好了。
第二個(gè)函數(shù)的作用是獲取當(dāng)前picker的transform值，作為下一次滑動計(jì)算的依據(jù)。其實(shí)感覺這樣挺費(fèi)事，因?yàn)樵趖ouchend中最后肯定會計(jì)算translate值，我們只需要每次保存最后滑動的移動值就好了，而不要每次都要在DOM中取。

/*** translateUtil* 對瀏覽器對前綴支持的一些判斷* 檢測瀏覽器對3d屬性的支持情況* 獲取當(dāng)前的translate值/清空picker的translate值/移動picker* 對于瀏覽器的檢測方面，這也算是一個(gè)比較好的工具類*/ 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-', // IEgecko: '-moz-', // FireFoxwebkit: '-webkit-', // Chrome/Safari/etc...presto: '-o-' // Opera }[engine];// style前綴 var vendorPrefix = {trident: 'ms',gecko: 'Moz',webkit: 'Webkit',presto: 'O' }[engine];var helpElem = document.createElement('div'); 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; }// 講一下這個(gè)正則 // \s*(-?\d+(\.\d+?)?)px 這是一個(gè)單元，匹配這樣的 -23.15px, 剩下的應(yīng)該就好理解了 var regexp = /translate$\s*(-?\d+(\.\d+?)?)px,\s*(-?\d+(\.\d+?)?)px$\s*translateZ$0px$/ig;

接下來看看滑動中

drag: function(event) {// 加上 dragging 類是為了清除過渡效果，在swiper中也有同樣的應(yīng)用el.classList.add('dragging');dragState.left = event.pageX;dragState.top = event.pageY;var deltaY = dragState.top - dragState.startTop;// 計(jì)算當(dāng)前的滑動位移var translate = dragState.startTranslateTop + deltaY;// 滑動元素translateUtil.translateElement(el, null, translate);velocityTranslate = translate - prevTranslate || translate;prevTranslate = translate;if (rotateEffect) {updateRotate(prevTranslate, pickerItems);} }

看到以上的代碼中有一個(gè)velocityTranslate，這個(gè)值有神馬作用，最開始我也不清楚，后面發(fā)現(xiàn)在滑動結(jié)束之后用到了，才明白了它代表了一個(gè)速率的位移值。什么是速率？就好比你快速滑動的時(shí)候，總希望它能夠慣性滑動一下，這個(gè)值乘以一個(gè)慣性值就可以得出一個(gè)慣性位移。看end中的代碼。

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的倍數(shù)// 在范圍的最大值和最小值中取translate = Math.max(Math.min(translate, dragRange[1]), dragRange[0]);translateUtil.translateElement(el, null, translate);// 計(jì)算得出當(dāng)前位移下應(yīng)該對應(yīng)的實(shí)際值currentValue = translate2Value(translate);// 3d效果if (rotateEffect) {planUpdateRotate();}}, 10);dragState = {}; }

這就是整個(gè)picker的實(shí)現(xiàn)流程，撇開3d效果就可以使用了。下面看一下如何實(shí)現(xiàn)的3D效果。在doOnValuesChange中有一個(gè)最開始的初始化。

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

給每一個(gè)item設(shè)置了根據(jù)索引來的位移值，此時(shí)的每一個(gè)item的定位都必須是absolute的，這樣位移下來才是緊挨著的，不然可能中間都會有一個(gè)itemHeight的空格。

3D效果中最關(guān)鍵的一點(diǎn)就是如何進(jìn)行翻轉(zhuǎn)角度的計(jì)算。在源碼中定義了一個(gè)常量對象：

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

可以看到，當(dāng)只有3個(gè)可見元素的時(shí)候，高亮部分相對于X軸平行，而上一個(gè)item就必須繞X軸順時(shí)針旋轉(zhuǎn)45度，反之下一個(gè)item繞X軸逆時(shí)針旋轉(zhuǎn)45度。另外在其中有一段代碼特別繞，根據(jù)我的理解是這樣的：

// 當(dāng)前item相對于頂部原本應(yīng)該有的位移值 var itemOffsetTop = index * itemHeight; // 滑動過程中，相對于最開始的位置滑動的位移值 var translateOffset = dragRange[1] - currentTranslate;// 當(dāng)應(yīng)該有的位移值和滑動的位移值相等的時(shí)候，也就說明了當(dāng)前的`item`被選中 // 也就是說此時(shí)當(dāng)前的角度為0 var itemOffset = itemOffsetTop - translateOffset; var percentage = itemOffset / itemHeight;var angle = angleUnit * percentage; if (angle > 180) angle = 180; if (angle < -180) angle = -180;rotateElement(item, angle);

如果覺得太繞，其實(shí)也沒有必要按照他的這種做法來，我們只要想辦法確定每一個(gè)item相對于當(dāng)前選中的item是處于上一個(gè)還是下一個(gè)，就可以根據(jù)此來計(jì)算角度。

2. 總結(jié)

關(guān)于餓了么中的picker組件就看了這么多，整體來說跟swiper中的滑動十分相似，其中的關(guān)鍵點(diǎn)在于最后的計(jì)算位移值來根據(jù)位移值滑動到正確的位置，至于怎么計(jì)算值，其實(shí)每個(gè)人的實(shí)現(xiàn)方式可能都是大同小異的，也沒要必要一定要按照源碼來，可以適當(dāng)加入自己的理解，這樣或許寫起代碼來更加得心應(yīng)手。這里只是個(gè)人的一點(diǎn)理解，希望能夠給自己也給大家提供一點(diǎn)幫助。

轉(zhuǎn)載于:https://www.cnblogs.com/rynxiao/p/7646879.html

總結(jié)

以上是生活随笔為你收集整理的移动端效果之Picker的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：引用和指针-内存的分配方式有几种
下一篇： ajax接收到的数据是一个页面的代码的原