移动端效果中Picke的实现方法-js教程-PHP中文网

首页

web前端

js教程

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

一个新手

Oct 12, 2017 am 09:41 AM

实现方法

写在前面

接着前面的移动端效果的研究，这次来看看picker选择器的实现原理

移动端效果之Swiper

代码看这里：github

picker

1. 核心解析

1.1 基本HTML结构

<!--     说明：    
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>

1.2 初始化DOM

由于饿了么源码中的picker是采用v-for指令生成的DOM，因此我这里只是简单的用javascript来模拟一下DOM的生成。

var el = document.querySelector(&#39;#wrapper&#39;);
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="picker"></p>加上类"picker-3d"// <p class="picker-slot" style="flex:1;">加上类"picker-slot-absolute"if (rotateEffect) {
    var picker = document.querySelector(&#39;.picker&#39;);
    var pickerSlot = document.querySelector(&#39;.picker-slot&#39;);
    picker.classList.add(&#39;picker-3d&#39;);
    pickerSlot.classList.add(&#39;picker-slot-absolute&#39;);}// 限定容器高度el.style.height = `${visibleItemCount * itemHeight}px`;// 生成DOMvar html = &#39;&#39;;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(&#39;.picker-item&#39;);pickerItems[valueIndex].classList.add(&#39;picker-selected&#39;);

1.3 初始化事件

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

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

    // ...});// 滑动结束var endFn = function(event) {
    // 注销事件
    if (!supportTouch) {
        document.removeEventListener(&#39;mousemove&#39;, moveFn);
        document.removeEventListener(&#39;mouseup&#39;, 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).

第一个函数的作用是获取picker能够滑动的最小和最大的位移，这将会在滑动结束事件中用到。关于如何计算，这里简单提一下，向下滑动，最大不能超过最中间的item的最上方，这也就是为什么itemHeight * Math.floor(visibleItemCount / 2)，而向上滑动，最大不能超过中间item的最下方，-itemHeight * (valuesLength - Math.ceil(visibleItemCount / 2))，细细想一下就好了。
第二个函数的作用是获取当前picker的transform值，作为下一次滑动计算的依据。其实感觉这样挺费事，因为在touchend中最后肯定会计算translate值，我们只需要每次保存最后滑动的移动值就好了，而不要每次都要在DOM中取。

/** * translateUtil * 对浏览器对前缀支持的一些判断 * 检测浏览器对3d属性的支持情况 * 获取当前的translate值/清空picker的translate值/移动picker * 对于浏览器的检测方面，这也算是一个比较好的工具类 */var docStyle = document.documentElement.style;var engine;var translate3d = false;// 浏览器判断if (window.opera && Object.prototype.toString.call(opera) === &#39;[object Opera]&#39;) {
    engine = &#39;presto&#39;;} else if (&#39;MozAppearance&#39; in docStyle) {
    engine = &#39;gecko&#39;;} else if (&#39;WebkitAppearance&#39; in docStyle) {
    engine = &#39;webkit&#39;;} else if (typeof navigator.cpuClass === &#39;string&#39;) {
    engine = &#39;trident&#39;;}// css前缀var cssPrefix = {
    trident: &#39;-ms-&#39;,        // IE
    gecko: &#39;-moz-&#39;,         // FireFox
    webkit: &#39;-webkit-&#39;,     // Chrome/Safari/etc...
    presto: &#39;-o-&#39;           // Opera}[engine];// style前缀var vendorPrefix = {
    trident: &#39;ms&#39;,
    gecko: &#39;Moz&#39;,
    webkit: &#39;Webkit&#39;,
    presto: &#39;O&#39;}[engine];var helpElem = document.createElement(&#39;p&#39;);var perspectiveProperty = vendorPrefix + &#39;Perspective&#39;;var transformProperty = vendorPrefix + &#39;Transform&#39;;var transformStyleName = cssPrefix + &#39;transform&#39;;var transitionProperty = vendorPrefix + &#39;Transition&#39;;var transitionStyleName = cssPrefix + &#39;transition&#39;;var transitionEndProperty = vendorPrefix.toLowerCase() + &#39;TransitionEnd&#39;;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(&#39;dragging&#39;);

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

看到以上的代码中有一个velocityTranslate，这个值有神马作用，最开始我也不清楚，后面发现在滑动结束之后用到了，才明白了它代表了一个速率的位移值。什么是速率？就好比你快速滑动的时候，总希望它能够惯性滑动一下，这个值乘以一个惯性值就可以得出一个惯性位移。看end中的代码。

end: function() {
    // 添加过渡
    el.classList.remove(&#39;dragging&#39;);
    // 惯性值
    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 = {};}

这就是整个picker的实现流程，撇开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. 总结

关于饿了么中的picker组件就看了这么多，整体来说跟swiper中的滑动十分相似，其中的关键点在于最后的计算位移值来根据位移值滑动到正确的位置，至于怎么计算值，其实每个人的实现方式可能都是大同小异的，也没要必要一定要按照源码来，可以适当加入自己的理解，这样或许写起代码来更加得心应手。这里只是个人的一点理解，希望能够给自己也给大家提供一点帮助。

以上是移动端效果中Picke的实现方法的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr

node.js流带打字稿Apr 30, 2025 am 08:22 AM

Node.js擅长于高效I/O，这在很大程度上要归功于流。流媒体汇总处理数据，避免内存过载 - 大型文件，网络任务和实时应用程序的理想。将流与打字稿的类型安全结合起来创建POWE

Python vs. JavaScript：性能和效率注意事项Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差异主要体现在：1)Python作为解释型语言，运行速度较慢，但开发效率高，适合快速原型开发；2)JavaScript在浏览器中受限于单线程，但在Node.js中可利用多线程和异步I/O提升性能，两者在实际项目中各有优势。

JavaScript的起源：探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年，由布兰登·艾克创造，实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

幕后：什么语言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行，依赖JavaScript引擎解析和执行代码。1）解析阶段生成抽象语法树（AST）；2）编译阶段将AST转换为字节码或机器码；3）执行阶段执行编译后的代码。

Python和JavaScript的未来：趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括：1.Python将巩固在科学计算和AI领域的地位，2.JavaScript将推动Web技术发展，3.跨平台开发将成为热门，4.性能优化将是重点。两者都将继续在各自领域扩展应用场景，并在性能上有更多突破。

Python vs. JavaScript：开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。