移動端效果之Swiper詳解

寫在前面

成都創(chuàng)新互聯(lián)自2013年創(chuàng)立以來，先為汾西等服務建站，汾西等地企業(yè)，進行企業(yè)商務咨詢服務。為汾西企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

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

移動端效果之Swiper詳解

代碼在這里：戳我

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，而是想滑動頁面

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

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

重置位移

// 如果存在上一個頁面并且是左移
if (dragState.prevPage && towards === 'prev') {
  // 重置上一個頁面的水平位移為 offsetLeft - dragState.pageWidth
  // 由于 offsetLeft 一直在變化，并且 >0
  // 那么也就是說 offsetLeft - dragState.pageWidth 的值一直在變大，但是仍未負數(shù)
  // 這就是為什么當連續(xù)屬性存在的時候左滑會看到上一個頁面會跟著滑動的原因
  // 這里的 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的滑動信息就不算數(shù)，因此要做一些清除操作：

dragging = false;
dragState = {};

當然如果userScrolling:false，那么就是滑動子頁面，執(zhí)行doOnTouchEnd方法

判斷是否是tap事件

// 時間小于300ms,click事件延遲300ms觸發(fā)
// 水平位移和垂直位移棟小于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');
  }
}

判斷方向

// 如果事件間隔小于300ms但是滑出屏幕，直接返回
if (dragDuration < 300 && dragState.currentLeft === undefined) return;

// 如果事件間隔小于300ms 或者 滑動位移超過屏幕寬度 1/2， 根據(jù)位移判斷方向
if (dragDuration < 300 || Math.abs(offsetLeft) > pageWidth / 2) {
  towards = offsetLeft < 0 ? 'next' : 'prev';
}

// 如果非連續(xù)，當處于第一頁，不會出現(xiàn)上一頁，當處于最后一頁，不會出現(xiàn)下一頁
if (!continuous) {
  if ((index === 0 && towards === 'prev') 
    || (index === pageCount - 1 && towards === 'next')) {
    towards = null;
  }
}

// 子頁面數(shù)量小于2時，不執(zhí)行滑動動畫
if (children.length < 2) {
  towards = null;
}

執(zhí)行動畫

// 當沒有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);
      // 當前頁執(zhí)行動畫，完成后執(zhí)行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);
}
​

后置工作:

清除一次滑動周期中保存的狀態(tài)信息

dragging = false;
dragState = {};

總結

整體來說實現(xiàn)原理還是比較簡單的，滑動開始記錄初始位置，計算上一頁與下一頁的應該展示的頁面；滑動中計算位移，計算上一頁下一頁的位移；滑動結束根據(jù)位移結果執(zhí)行相應的動畫。

有一個細節(jié)就是，在滑動中transition的效果置為空，是為了防止在滑動中上一頁與下一頁因為過渡存在而位移得不自然，在滑動結束后再給他們加上動畫效果。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章標題：移動端效果之Swiper詳解
網頁地址：http://muchs.cn/article38/isgisp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站收錄、云服務器、網站建設、網站設計、網站維護、域名注冊

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網站建設