移动端效果之Swiper详解

大佬教程收集整理的这篇文章主要介绍了移动端效果之Swiper详解，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

写在前面

最近在做移动端方面运用到了饿了么的vue前端组件库，因为不想单纯用组件而使用它，故想深入了解一下实现原理。后续将会继续研究一下其他的组件实现原理，有兴趣的可以关注下。

代码在这里：https://jsbin.com/koriguy/2/edit?js">戳我

1. 说明

父容器);width:100%;

2. 核心解析

2.1 页面初始化

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

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

2.2 容器滑动开始(onTouchStart)

在低版本的

前置工作：

• 如果用户设置了 prevent:true， 滑动时阻止默认行为
• 如果用户设置了stopPropagation:true， 滑动时阻止事件向上传播
• 如果动画尚未结束，阻止滑动
• 设置dragging:true，滑动开始
• 设置用户滚动为false

滑动开始：

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

2.3 容器滑动(onTouchMovE)

套用全局

那么我们就可以通过开始和滑动中的信息来计算出一些东西：

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

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

是否是用户的自然滚动，这里的自然滚动说的是用户并不是想滑动swiper，而是想滑动页面

判断是左移还是右移（offsetLeft < 0 左移，反之，右移）

重置位移

2.4 滑动结束(onTouchEnd)

前置工作：

在滑动中，我们是可以实时地来判断到底是不是用户的自然滚动userScrolling，如果是用户自然滚动，那么

当然如果userScrolling:false，那么就是滑动子页面，执行doOnTouchEnd方法

判断是否是tap事件

判断方向

执行动画

<div class="jb51code">
<pre class="brush:js;">
// 当没有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,speed)
}
} else if (toWARDs === 'prev') {
isDone = true;
before(currentPagE);
translate(currentPage,callBACk);
if (prevPagE) {
translate(prevPage,speed);
}
} else {
// 如果既不是左滑也不是右滑
isDone = true;
// 当前页面依旧处于视野中
// 上一页和下一页滑出
translate(currentPage,callBACk);
if (typeof offsetLeft !== 'undefined') {
if (prevPage && offsetLeft > 0) {
translate(prevPage,pageWidth * -1,speed);
}
if (nextPage && offsetLeft < 0) {
translate(nextPage,speed);
}
} else {
if (prevPagE) {
translate(prevPage,speed);
}

  if (nextPagE) {
   translate(nextPage,speed);
  }
 }
}

},10);
}
​