移動端效果之Swiper

寫在前面

最近在做移動端方面運用到了餓了么的vue前端組件庫，因為不想單純用組件而使用它，故想深入了解一下實現原理。后續將會繼續研究一下其他的組件實現原理，有興趣的可以關注下。

代碼在這里：戳我 or github

移動端效果之Picker

移動端效果之CellSwiper

移動端效果之IndexList

1. 說明

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

2. 核心解析

2.1 頁面初始化

由於所有頁面都在手機屏幕左側一個屏幕寬度的位置，因此最開始的情況是頁面中看不到任何一個子頁面，所以第一步應該設置應該顯示的子頁面，默認情況下defaultIndex:0

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()會起到一定的性能提升作用，使得滑動起來不是那么卡。

前置工作：

• 如果用戶設置了 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)
};

那么我們就可以通過開始和滑動中的信息來計算出一些東西：

一、滑動的水平位移（offsetLeft = currentLeft - startLeft）

二、滑動的垂直位移（offsetTop = currentTopAbsolute - startTopAbsolute）

三、是否是用戶的自然滾動，這里的自然滾動說的是用戶並不是想滑動swiper，而是想滑動頁面

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

四、判斷是左移還是右移（offsetLeft < 0 左移，反之，右移）

五、重置位移

```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方法

一、判斷是否是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');
    }
}
```

二、判斷方向

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

三、執行動畫

```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的效果置為空，是為了防止在滑動中上一頁與下一頁因為過渡存在而位移得不自然，在滑動結束后再給他們加上動畫效果。