모바일 효과에서 Picke를 구현하는 방법

앞서 작성

모바일 효과에 대한 이전 연구에 이어 이번에는 모바일 효과에서 Picke를 구현하는 방법 선택기의 구현 원리를 살펴보겠습니다.모바일 효과에서 Picke를 구현하는 방법选择器的实现原理

移动端效果之Swiper

代码看这里：github

1. 核心解析

1.1 基本HTML结构

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

1.2 初始化DOM

由于饿了么源码中的모바일 효과에서 Picke를 구현하는 방법是采用v-for指令生成的DOM，因此我这里只是简单的用javascript来模拟一下DOM的生成。

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

1.3 初始化事件

总体上来说，모바일 효과에서 Picke를 구현하는 방법的事件也包括滑动开始、滑动中、滑动结束。因为毕竟是移动端，滑动不可避免。这次，源码中的对滑动事件进行了封装，兼容了PC端以及排除了拖动和选择造成的影响，具体看一下分析。`

/**  * 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);
    }}

要是DOM跟随自己在手机屏幕上的滑动而滑动，方法大同小异，无非就是在开始滑动记录开始位置，滑动中实时计算位移，滑动结束之后将DOM滑动应该滑动的位置。这点可以参看前面一篇文章移动端效果之Swiper，这篇文章中有着相同的方法。这里重点讲一下其中的区别

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

这其中有两个方法，第一个getDragRange和第二个getElementTranslate(el).

• 第一个函数的作用是获取모바일 효과에서 Picke를 구현하는 방법能够滑动的最小和最大的位移，这将会在滑动结束事件中用到。关于如何计算，这里简单提一下，向下滑动，最大不能超过最中间的item的最上方，这也就是为什么itemHeight * Math.floor(visibleItemCount / 2)，而向上滑动，最大不能超过中间item的最下方，-itemHeight * (valuesLength - Math.ceil(visibleItemCount / 2))，细细想一下就好了。

• 第二个函数的作用是获取当前모바일 효과에서 Picke를 구현하는 방법的transform值，作为下一次滑动计算的依据。其实感觉这样挺费事，因为在touchend中最后肯定会计算translate值，我们只需要每次保存最后滑动的移动值就好了，而不要每次都要在DOM中取。

/** * translateUtil * 对浏览器对前缀支持的一些判断 * 检测浏览器对3d属性的支持情况 * 获取当前的translate值/清空모바일 효과에서 Picke를 구현하는 방법的translate值/移动모바일 효과에서 Picke를 구현하는 방법 * 对于浏览器的检测方面，这也算是一个比较好的工具类 */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, 모바일 효과에서 Picke를 구현하는 방법Items);
    }}

看到以上的代码中有一个velocityTranslate，这个值有神马作用，最开始我也不清楚，后面发现在滑动结束之后用到了，才明白了它代表了一个速率的位移值。什么是速率？就好比你快速滑动的时候，总希望它能够惯性滑动一下，这个值乘以一个惯性值就可以得出一个惯性位移。看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(&#39;momentumTranslate&#39;, 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 = {};}

这就是整个모바일 효과에서 Picke를 구현하는 방법的实现流程，撇开3d效果就可以使用了。下面看一下如何实现的3D效果。在doOnValuesChange中有一个最开始的初始化。

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

给每一个item设置了根据索引来的位移值，此时的每一个item的定位都必须是absolute的，这样位移下来才是紧挨着的，不然可能中间都会有一个itemHeight的空格。

3D效果中最关键的一点就是如何进行翻转角度的计算。在源码中定义了一个常量对象：

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

可以看到，当只有3个可见元素的时候，高亮部分相对于X轴平行，而上一个item就必须绕X轴顺时针旋转45度，反之下一个item绕X轴逆时针旋转45度。另外在其中有一段代码特别绕，根据我的理解是这样的：

// 当前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);

如果觉得太绕，其实也没有必要按照他的这种做法来，我们只要想办法确定每一个item相对于当前选中的item是处于上一个还是下一个，就可以根据此来计算角度。

2. 总结

关于饿了么中的모바일 효과에서 Picke를 구현하는 방법组件就看了这么多，整体来说跟swiper

모바일 효과용 Swiper🎜🎜코드 위치: github🎜 🎜🎜🎜1 핵심 분석🎜

1.1 기본 HTML 구조

🎜rrreee

1.2 DOM 초기화

🎜Ele.me 소스 코드의 선택기는 v-for 명령은 DOM을 생성하므로 여기서는 javascript를 사용하여 DOM 생성을 시뮬레이션합니다. 🎜

🎜rrreee

1.3 초기화 이벤트

🎜일반적으로 모바일 효과에서 Picke를 구현하는 방법의 이벤트에는 슬라이딩 시작, 슬라이딩, 슬라이딩 종료도 포함됩니다. . 결국 모바일 기기이기 때문에 미끄러짐은 불가피합니다. 이번에는 슬라이딩 이벤트가 소스 코드에 캡슐화되어 PC 측과 호환되며 드래그 및 선택의 영향을 제거합니다. `🎜

🎜rrreee🎜 DOM이 휴대폰 화면의 슬라이딩을 따라 슬라이드하는 경우 방법은 비슷합니다. 슬라이딩의 시작, 슬라이딩 실시간으로 변위를 계산하고, 슬라이딩이 완료된 후 DOM을 슬라이드해야 할 위치로 슬라이드합니다. 이에 대해서는 이전 글 모바일 효과를 위한 Swiper를 참고하시기 바랍니다. 이 글도 같은 방법입니다. 여기서는 차이점에 중점을 둡니다🎜

🎜rrreee🎜두 가지 메소드가 있습니다. 첫 번째 getDragRange와 두 번째 getElementTranslate(el)입니다. >.🎜

• 🎜첫 번째 함수의 기능은 모바일 효과에서 Picke를 구현하는 방법가 슬라이드할 수 있는 최소 및 최대 변위를 얻는 것입니다. 슬라이딩 엔드 이벤트. 계산 방법에 대해 간단히 설명하면 아래로 슬라이드할 때 최대값은 중간 item의 상단을 초과할 수 없습니다. 이것이 바로 itemHeight * Math.floor(visibleItemCount / 2) 입니다. code>, 위쪽으로 슬라이드할 때 최대값은 가운데 item, -itemHeight * (valuesLength - Math.ceil(visibleItemCount / 2))의 하단을 초과할 수 없습니다. code> 잘 생각해보세요. 괜찮습니다. 🎜
• 🎜두 번째 기능은 다음 슬라이딩 계산의 기초로 현재 선택기의 transform 값을 얻는 것입니다. 사실 translate 값은 매번 touchend에서 계산되기 때문에 꽤 번거롭다고 생각합니다. 대신 매번 마지막 슬라이딩 이동 값만 저장하면 됩니다. 모두 DOM에서 얻어야 합니다. 🎜

🎜rrreee🎜 다음으로 슬라이딩을 살펴보세요 🎜

🎜rrreee🎜보기 위의 코드에 velocityTranslate가 있는데 이 값은 처음에는 몰랐는데 슬라이딩이 완료된 후에 사용되었다는 것을 알게 되었습니다. 속도의 변위값을 나타낸다는 것을 깨달았습니다. 속도란 무엇입니까? 빠르게 미끄러질 때처럼 항상 관성으로 미끄러질 수 있기를 바랍니다. 이 값에 관성 값을 곱하면 관성 변위를 얻을 수 있습니다. end의 코드를 살펴보세요. 🎜

🎜rrreee🎜전체 모바일 효과에서 Picke를 구현하는 방법 구현 과정입니다. 3d 효과 없이 사용할 수 있습니다. 3D 효과를 얻는 방법을 살펴보겠습니다. doOnValuesChange에 초기 초기화가 있습니다. 🎜

🎜rrreee🎜 각 항목의 인덱스를 기준으로 변위 값을 설정합니다. 이때 각 항목의 위치 지정은 다음과 같습니다. 변위가 서로 가까워지도록 절대여야 합니다. 그렇지 않으면 중간에 itemHeight 공백이 있을 수 있습니다. 🎜🎜3D 효과에서 가장 중요한 점은 뒤집는 각도를 어떻게 계산하느냐입니다. 상수 객체는 소스 코드에 정의되어 있습니다: 🎜

🎜rrreee🎜표시되는 요소가 3개뿐일 때 강조 표시된 부분은 X를 기준으로 합니다. code >축이 평행하며, 이전 <code>항목은 X축을 중심으로 시계 방향으로 45도 회전해야 하고, 다음 항목은 회전해야 합니다. X 축을 기준으로 시계 방향입니다. /code>축이 시계 반대 방향으로 45도 회전합니다. 그 외에 특히 코드가 복잡하다고 생각되는 부분이 있습니다. 🎜

🎜rrreee🎜너무 복잡하다고 생각하시면, 실제로 그의 접근 방식을 따를 필요는 없습니다. 각 항목이 현재 선택된 항목을 기준으로 이전 위치에 있는지 아니면 다음 위치에 있는지 확인하는 방법만 찾으면 됩니다. 이를 토대로 각도를 계산할 수 있습니다. 🎜🎜2. 요약🎜🎜Ele.me의 모바일 효과에서 Picke를 구현하는 방법 구성 요소에 대해 많이 읽었습니다. 전체적으로 swiper의 슬라이딩과 매우 유사합니다. 변위값을 기준으로 올바른 위치로 밀어 넣는 것이 변위값의 최종 계산에 있습니다. 값을 계산하는 방법은 실제로 모든 사람의 구현이 유사할 수 있으므로 소스를 따를 필요는 없습니다. 자신이 이해한 내용을 적절하게 추가하면 코드 작성이 더 쉬워질 수 있습니다. 이것은 단지 약간의 개인적인 이해일 뿐이며, 나 자신과 모든 사람에게 도움이 되기를 바랍니다. 🎜

위 내용은 모바일 효과에서 Picke를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!