移动端效果之Swiper

时间 2019-11-25

标签移动效果 swiper 栏目无线繁體版

原文原文链接

写在前面

最近在作移动端方面运用到了饿了么的vue前端组件库，由于不想单纯用组件而使用它，故想深刻了解一下实现原理。后续将会继续研究一下其余的组件实现原理，有兴趣的能够关注下。javascript

代码在这里：戳我 or githubhtml

移动端效果之Picker前端

移动端效果之CellSwipervue

移动端效果之IndexListjava

1. 说明

父容器overflow:hidden;，子页面transform:translateX(-100%);width:100%;android

2. 核心解析

2.1 页面初始化

因为全部页面都在手机屏幕左侧一个屏幕宽度的位置，所以最开始的状况是页面中看不到任何一个子页面，因此第一步应该设置应该显示的子页面，默认状况下defaultIndex:0git

function reInitPages() {
    // 得出页面是否可以被滑动
    // 1. 子页面只有一个
    // 2. 用户手动设置不能滑动 noDragWhenSingle = true
    noDrag = children.length === 1 && noDragWhenSingle;

    var aPages = [];
    var intDefaultIndex = Math.floor(defaultIndex);
    var defaultIndex = (intDefaultIndex >= 0 && intDefaultIndex < children.length) 
        ? intDefaultIndex : 0;
    
    // 获得当前被激活的子页面索引
    index = defaultIndex;

    children.forEach(function(child, index) {
        aPages.push(child);
        // 全部页面移除激活class
        child.classList.remove('is-active');

        if (index === defaultIndex) {
            // 给激活的子页面加上激活class
            child.classList.add('is-active');
        }
    });

    pages = aPages;
}

2.2 容器滑动开始(onTouchStart)

在低版本的android手机上，设置event.preventDefault()会起到必定的性能提高做用，使得滑动起来不是那么卡。github

前置工做：性能

若是用户设置了 prevent:true，滑动时阻止默认行为
若是用户设置了stopPropagation:true，滑动时阻止事件向上传播
若是动画还没有结束，阻止滑动
设置dragging:true，滑动开始
设置用户滚动为false

滑动开始：动画

使用一个全局对象记录信息，这些信息包括：

dragState = {
    startTime           // 开始时间
    startLeft           // 开始的X坐标
    startTop            // 开始的Y坐标(相对于整个页面viewport pageY)
    startTopAbsolute    // 绝对Y坐标(相对于文档顶部 clientY)
    pageWidth           // 一个页面宽度
    pageHeight          // 一个页面的高度
    prevPage            // 上一个页面
    dragPage            // 当前页面
    nextPage            // 下一个页面
};

2.3 容器滑动(onTouchMove)

套用全局dragState，记录新的信息

dragState = {
    currentLeft         // 开始的X坐标
    currentTop          // 开始的Y坐标(相对于整个页面viewport pageY)
    currentTopAbsolute  // 绝对Y坐标(相对于文档顶部 clientY)
};

那么咱们就能够经过开始和滑动中的信息来计算出一些东西：

1、滑动的水平位移（offsetLeft = currentLeft - startLeft）

2、滑动的垂直位移（offsetTop = currentTopAbsolute - startTopAbsolute）

3、是不是用户的天然滚动，这里的天然滚动说的是用户并非想滑动swiper，而是想滑动页面

```javascript
// 条件
// distanceX = Math.abs(offsetLeft);
// distanceY = Math.abs(offsetTop);
distanceX < 5 || ( distanceY >= 5 && distanceY >= 1.73 * distanceX )
```

4、判断是左移仍是右移（offsetLeft < 0 左移，反之，右移）

5、重置位移

```javascript
// 若是存在上一个页面而且是左移
if (dragState.prevPage && towards === 'prev') {
    // 重置上一个页面的水平位移为 offsetLeft - dragState.pageWidth
    // 因为 offsetLeft 一直在变化，而且 >0
    // 那么也就是说 offsetLeft - dragState.pageWidth 的值一直在变大，可是仍未负数
    // 这就是为何当连续属性存在的时候左滑会看到上一个页面会跟着滑动的缘由
    // 这里的 translate 方法其实很简单，在滑动的时候去除了动画效果`transition`，单纯改变位移
    // 而在滑动结束的时候，加上`transition`，使得滑动到最后释放的过渡更加天然
    translate(dragState.prevPage, offsetLeft - dragState.pageWidth);
} 

// 当前页面跟着滑动
translate(dragState.dragPage, offsetLeft);

// 后一个页面同理
if (dragState.nextPage && towards === 'next') {
    translate(dragState.nextPage, offsetLeft + dragState.pageWidth);
}
```

2.4 滑动结束(onTouchEnd)

前置工做：

在滑动中，咱们是能够实时地来判断究竟是不是用户的天然滚动userScrolling，若是是用户天然滚动，那么swiper的滑动信息就不算数，所以要作一些清除操做：

dragging = false;
dragState = {};

固然若是userScrolling:false，那么就是滑动子页面，执行doOnTouchEnd方法

1、判断是不是tap事件

```javascript
// 时间小于300ms,click事件延迟300ms触发
// 水平位移和垂直位移栋小于5像素
if (dragDuration < 300) {
    var fireTap = Math.abs(offsetLeft) < 5 && Math.abs(offsetTop < 5);
    if (isNaN(offsetLeft) || isNaN(offsetTop)) {
        fireTap = true;
    }
    if (fireTap) {
        console.log('tap');
    }
}
```

2、判断方向

```javascript
// 若是事件间隔小于300ms可是滑出屏幕，直接返回
if (dragDuration < 300 && dragState.currentLeft === undefined) return;

// 若是事件间隔小于300ms 或者 滑动位移超过屏幕宽度 1/2， 根据位移判断方向
if (dragDuration < 300 || Math.abs(offsetLeft) > pageWidth / 2) {
    towards = offsetLeft < 0 ? 'next' : 'prev';
}

// 若是非连续，当处于第一页，不会出现上一页，当处于最后一页，不会出现下一页
if (!continuous) {
    if ((index === 0 && towards === 'prev') 
        || (index === pageCount - 1 && towards === 'next')) {
        towards = null;
    }
}

// 子页面数量小于2时，不执行滑动动画
if (children.length < 2) {
    towards = null;
}
```

3、执行动画

```javascript
// 当没有options的时候，为天然滑动，也就是定时器滑动
function doAnimate(towards, options) {
    if (children.length === 0) return;
    if (!options && children.length < 2) return;

    var prevPage, nextPage, currentPage, pageWidth, offsetLeft;
    var pageCount = pages.length;

    // 定时器滑动
    if (!options) {
        pageWidth = element.clientWidth;
        currentPage = pages[index];
        prevPage = pages[index - 1];
        nextPage = pages[index + 1];
        if (continuous && pages.length > 1) {
            if (!prevPage) {
                prevPage = pages[pages.length - 1];
            }

            if (!nextPage) {
                nextPage = pages[0];
            }
        }

        // 计算上一页与下一页以后
        // 重置位移
        // 参看doOnTouchMove
        // 其实这里的options 传与不传也就是获取上一页信息与下一页信息
        if (prevPage) {
            prevPage.style.display = 'block';
            translate(prevPage, -pageWidth);
        }

        if (nextPage) {
            nextPage.style.display = 'block';
            translate(nextPage, pageWidth);
        }
    } else {
        prevPage = options.prevPage;
        currentPage = options.currentPage;
        nextPage = options.nextPage;
        pageWidth = options.pageWidth;
        offsetLeft = options.offsetLeft;
    }

    var newIndex;
    var oldPage = children[index];

    // 获得滑动以后的新的索引
    if (towards === 'prev') {
        if (index > 0) {
            newIndex = index - 1;
        }
        if (continuous && index === 0) {
            newIndex = pageCount - 1;
        }
    } else if (towards === 'next') {
        if (index < pageCount - 1) {
            newIndex = index + 1;
        }
        if (continuous && index === pageCount - 1) {
            newIndex = 0;
        }
    }

    // 动画完成以后的回调
    var callback = function() {
        // 获得滑动以后的激活页面，添加激活class
        // 从新赋值索引
        if (newIndex !== undefined) {
            var newPage = children[newIndex];
            oldPage.classList.remove('is-active');
            newPage.classList.add('is-active');
            index = newIndex
        }

        if (isDone) {
            end();
        }
      
        if (prevPage) {
            prevPage.style.display = '';
        }

        if (nextPage) {
            nextPage.style.display = '';
        }
    }

    setTimeout(function() {
        // 向后滑动
        if (towards === 'next') {
            isDone = true;
            before(currentPage);
            // 当前页执行动画，完成后执行callback
            translate(currentPage, -pageWidth, speed, callback);
            if (nextPage) {
                // 下一面移动视野中
                translate(nextPage, 0, speed)
            }
        } else if (towards === 'prev') {
            isDone = true;
            before(currentPage);
            translate(currentPage, pageWidth, speed, callback);
            if (prevPage) {
                translate(prevPage, 0, speed);
            }
        } else {
          // 若是既不是左滑也不是右滑
          isDone = true;
          // 当前页面依旧处于视野中
          // 上一页和下一页滑出
          translate(currentPage, 0, speed, callback);
          if (typeof offsetLeft !== 'undefined') {
              if (prevPage && offsetLeft > 0) {
                    translate(prevPage, pageWidth * -1, speed);
              }
              if (nextPage && offsetLeft < 0) {
                    translate(nextPage, pageWidth, speed);
              }
          } else {
            if (prevPage) {
              translate(prevPage, pageWidth * -1, speed);
            }

            if (nextPage) {
              translate(nextPage, pageWidth, speed);
            }
          }
       }
    }, 10);
}
```

后置工做:

清除一次滑动周期中保存的状态信息

dragging = false;
dragState = {};

总结

总体来讲实现原理仍是比较简单的，滑动开始记录初始位置，计算上一页与下一页的应该展现的页面；滑动中计算位移，计算上一页下一页的位移；滑动结束根据位移结果执行相应的动画。

有一个细节就是，在滑动中transition的效果置为空，是为了防止在滑动中上一页与下一页由于过渡存在而位移得不天然，在滑动结束后再给他们加上动画效果。