mint-ui swipe组件源码解析

前叙

mint-ui组件库中swipe组件，实现的是常见的轮播图效果。但是它的实现方式，和常见的实现有所不同。

常见的实现方式： 通过移动轮播图的wrapper来实现item的切换效果(也就是修改wrapper的translate3d属性来实现)。如果支持循环播放，需要在首部插入一个最后一个轮播图item的clone版，以及在尾部插入一个第一个轮播图item的clone版。

swipe组件实现的方式： 只显示当前显示的轮播图item，当切换的时候，显示出当前item的前后相邻的两个item；通过设置三个item的translate3d来实现切换的效果。

两个实现方式的对比：

第一种方式，初始会渲染出所有的item，通过translate3d来实现切换和滑动，这种方式会启动硬件加速提升性能。但是毕竟是在所有轮播图的基础上的渲染。

第二种方式，通过切换item的display属性来实现对应item的显示和隐藏，虽然会引起回流和重绘，但是每个item的position为absolute，脱离文档流，所以并不会引起其他dom的回流和重绘。每个item的translate3d引发的渲染只是在当前item的基础上。

通过上面分析，可以得出： 如果轮播图的数量不多，第一种方式不会引起回流和重绘，并且translate引发渲染的item不多，性能相对好；但是轮播图的数量比较多的话，第二种性能相对比较好。

swipe接入示例

html代码

<div id="app">
<div class="swipe-wrapper">
<mt-swipe :auto="0" ref="swipeWrapper">
<mt-swipe-item class="swip-item-1 item">1</mt-swipe-item>
<mt-swipe-item class="swip-item-2 item">2</mt-swipe-item>
<mt-swipe-item class="swip-item-3 item">3</mt-swipe-item>
</mt-swipe>
</div>

<div class="button-wrapper">
<button class="prev-button flex-item" @click="prev">prev</button>
<button class="next-button flex-item" @click="next">next</button>
</div>
</div>

css代码

<!-- 引入组件库css -->
<link rel="stylesheet" href="../css/mint-style.css">
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
}
#app{
width: 100%;
height: 100%;
}
.swipe-wrapper{
width: 100%;
height: 300px;
}
.swip-item-1{
background: red;
}
.swip-item-2{
background: blue;
}
.swip-item-3{
background: green;
}
.item{
text-align: center;
font-size: 40px;
color: white;
}

.button-wrapper{
display: flex;
height: 100px;
}
.flex-item{
flex: 1;
display: inline-block;
text-align: center;
height: 100%;
line-height: 100%;
font-size: 40px;
}
.prev-button{
background: darkorange;
}
.next-button{
background: green;
}

</style>

js代码

<!-- 先引入 Vue -->
<script src="../js/vue.js"></script>
<!-- 引入组件库 -->
<script src="../js/index.js"></script>
<script>
new Vue({
el: '#app',
methods: {
prev: function () {
this.$refs.swipeWrapper.prev();
console.log(this.$children);
},
next: function () {
this.$refs.swipeWrapper.next();
}
}
});
</script>

原理解析

初始只显示选中index的item，将其他item都隐藏

当拖动开始的时候，显示当前index的相邻两个item

当拖动的时候，计算出手指滑动的距离，通过设置当前item和其相关两个item的translate3d来改变他们的位置的方式，来实现切换的效果

自动播放：通过设置定时器，触发上面拖动相同的切换代码，来实现切换。

源码解析

首先看子组件swipe-item组件，代码很简单，如下：

<template>
<div class="mint-swipe-item">
<slot></slot>
</div>
</template>

<script>
export default {
name: 'mt-swipe-item',

mounted() { // 页面显示的时候触发
this.$parent && this.$parent.swipeItemCreated(this); // 内部实现:调用父组件的reinit()业务
},

destroyed() { // item隐藏的时候触发
this.$parent && this.$parent.swipeItemDestroyed(this); // 内部实现同上
}
};
</script>

上面的代码很简单，mounted和destoryed都是调用的父组件的实现。实现如下：

swipeItemCreated() {
if (!this.ready) return;

clearTimeout(this.reInitTimer);
this.reInitTimer = setTimeout(() => {
this.reInitPages();
}, 100);
},

swipeItemDestroyed() {
if (!this.ready) return;

clearTimeout(this.reInitTimer);
this.reInitTimer = setTimeout(() => {
this.reInitPages();
}, 100);
},

父组件swipe的props

这些数据都是允许外部传入的，这是数据的含义说明可以参考mint-ui的官网的说明mint-ui swipe组件

swipe组件的data说明

data() {
return {
ready: false, // 当前组件是否 mounted
dragging: false, // 当前是否正在拖动
userScrolling: false, // 判定当前用户在上下滚动,就不执行drag动作
animating: false, // 当前是否在执行动画(也就是自动切换页面)
index: 0, // 当前所在的item的index
pages: [], // 存储当前child 的dom
timer: null, // 自动播放的定时器 timerid
reInitTimer: null, // item组件触发reInit触发 定时器id
noDrag: false, // 存储是否运行拖动的标识
isDone: false // 当前动画是否执行完成
};
}

上面的注释都是我通过分析源码得出的，有了说明，下面看代码就更容易了。

swipe组件的入口函数mounted回调的实现

mounted() {
this.ready = true;

this.initTimer();// 初始化自动播放的timer

this.reInitPages(); // 初始化drag状态, 以及dom节点的样式信息

var element = this.$el;
// 为当前组件的dom节点 注册touch时间
element.addEventListener('touchstart', (event) => {
if (this.prevent) event.preventDefault();
if (this.stopPropagation) event.stopPropagation();
if (this.animating) return; // 如果当前在执行移动动画, 直接返回
this.dragging = true; // 设置dragging状态标识
this.userScrolling = false; // 重置
this.doOnTouchStart(event);
});

element.addEventListener('touchmove', (event) => {
if (!this.dragging) return;
if (this.timer) this.clearTimer(); // 将当前自动播放停止
this.doOnTouchMove(event);
});

element.addEventListener('touchend', (event) => {
if (this.userScrolling) { // 纵向滚动，重置状态并返回
this.dragging = false;
this.dragState = {};
return;
}
if (!this.dragging) return;
this.initTimer(); // 启动自动播放定时器
this.doOnTouchEnd(event);
this.dragging = false; // 重置拖动状态
});
}

关于初始化自动播放的定时器的代码，最后在分析。现在来看初始化dom样式的reInitPages函数实现如下：

reInitPages() {
var children = this.$children;
// 设置拖动状态
this.noDrag = children.length === 1 && this.noDragWhenSingle; // 当前只有一个item,并且设置了只有一个不支持拖动

var pages = [];
var intDefaultIndex = Math.floor(this.defaultIndex);
var defaultIndex = (intDefaultIndex >= 0 && intDefaultIndex < children.length) ? intDefaultIndex : 0;
this.index = defaultIndex; // 设置当前显示的索引值
//初始化显示样式, 将当前index的item显示出来,其他的都隐藏
children.forEach(function(child, index) {
pages.push(child.$el);

removeClass(child.$el, 'is-active');

if (index === defaultIndex) {
addClass(child.$el, 'is-active');
}
});
// 设置所有轮播图的item的dom
this.pages = pages;
},

swipe的touchstart事件回调的处理

上面已经有了回调的代码，主要看处理的核心函数doOnTouchStart的实现如下：

doOnTouchStart(event) { // 创建dragState, 包括touch事件的信息,当前drag item以及它前后两个item,并将其显示出来
if (this.noDrag) return; // 不支持拖动

var element = this.$el;
var dragState = this.dragState;
var touch = event.touches[0];
// 设置dragstate的信息(也就是当前滑动的信息数据)
dragState.startTime = new Date();
dragState.startLeft = touch.pageX;
dragState.startTop = touch.pageY;
dragState.startTopAbsolute = touch.clientY;

dragState.pageWidth = element.offsetWidth;
dragState.pageHeight = element.offsetHeight;

var prevPage = this.$children[this.index - 1];
var dragPage = this.$children[this.index];
var nextPage = this.$children[this.index + 1];

if (this.continuous && this.pages.length > 1) { // 当前支持循环播放, 并且pages的长度大于1
if (!prevPage) {
prevPage = this.$children[this.$children.length - 1];
}
if (!nextPage) {
nextPage = this.$children[0];
}
}

dragState.prevPage = prevPage ? prevPage.$el : null;
dragState.dragPage = dragPage ? dragPage.$el : null;
dragState.nextPage = nextPage ? nextPage.$el : null;
// 将当前index下的前后两个item显示出来
if (dragState.prevPage) {
dragState.prevPage.style.display = 'block';
}

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

获取当前touchstart状态下面的拖动的状态信息(包括touch的信息，页面宽高，prev、current、next三个item的dom)。同时将prev、next显示出来。

touchmove事件回调的处理

doOnTouchMove(event) {
if (this.noDrag) return;

var dragState = this.dragState;
var touch = event.touches[0];

dragState.currentLeft = touch.pageX;
dragState.currentTop = touch.pageY;
dragState.currentTopAbsolute = touch.clientY;
//计算滑动的距离
var offsetLeft = dragState.currentLeft - dragState.startLeft;
var offsetTop = dragState.currentTopAbsolute - dragState.startTopAbsolute;

var distanceX = Math.abs(offsetLeft);
var distanceY = Math.abs(offsetTop);
// 判断是 竖向滚动,还是横向滚动
if (distanceX < 5 || (distanceX >= 5 && distanceY >= 1.73 * distanceX)) {
this.userScrolling = true; // 判定当前用户在上下滚动,就不执行drag动作
return;
} else {
this.userScrolling = false;
event.preventDefault(); // 阻止默认事件的触发,也就是点击事件的触发
}
// 设置最大的拖拽距离在当前dom里面
offsetLeft = Math.min(Math.max(-dragState.pageWidth + 1, offsetLeft), dragState.pageWidth - 1);

var towards = offsetLeft < 0 ? 'next' : 'prev'; // 拖动的方向的确定
//prev方向: prev dom移动到指定的位置
if (dragState.prevPage && towards === 'prev') {
this.translate(dragState.prevPage, offsetLeft - dragState.pageWidth);
}
// current dom移动到指定的位置
this.translate(dragState.dragPage, offsetLeft);
// next方向: next dom 移动到指定的位置
if (dragState.nextPage && towards === 'next') {
this.translate(dragState.nextPage, offsetLeft + dragState.pageWidth);
}
}

主要确定当前滚动不是竖向滚动，并确定滚动的方向以确定移动prev还是next。

下面看translate移动dom的核心函数实现：

/**
* @param element 要移动的dom节点
* @param offset // dom移动的距离
* @param speed 如果传递, 执行动画的移动; 没有,则直接translate执行的距离
* @param callback 处理完成的回调函数
*/
translate(element, offset, speed, callback) {
if (speed) {
this.animating = true; // 当前正在执行动画,此时不能拖拽
element.style.webkitTransition = '-webkit-transform ' + speed + 'ms ease-in-out'; // transition过渡状态
setTimeout(() => {
element.style.webkitTransform = `translate3d(${offset}px, 0, 0)`;
}, 50);

var called = false;

var transitionEndCallback = () => {
if (called) return;
called = true;
this.animating = false; // 停止动画
element.style.webkitTransition = '';
element.style.webkitTransform = '';
if (callback) {
callback.apply(this, arguments); // 调用回调
}
};

once(element, 'webkitTransitionEnd', transitionEndCallback); // 此事件只执行一次
// 防止低版本android, 无法触发此事件
setTimeout(transitionEndCallback, speed + 100); // webkitTransitionEnd maybe not fire on lower version android.
} else {
element.style.webkitTransition = '';
element.style.webkitTransform = `translate3d(${offset}px, 0, 0)`;
}
}

如果设置了speed，就会执行平滑的动画切换(speed是动画执行的时间)；如果没有设置，直接移动到指定的位置，没有过渡效果。

touchend事件回调的实现

分析其中核心代码doTouchEnd函数：

doOnTouchEnd() {
if (this.noDrag) return;

var dragState = this.dragState;

var dragDuration = new Date() - dragState.startTime;
var towards = null; // 决定下面进入哪个页面, null: 当前页面, prev: 前一个页面, next: 下一个页面

var offsetLeft = dragState.currentLeft - dragState.startLeft;
var offsetTop = dragState.currentTop - dragState.startTop;
var pageWidth = dragState.pageWidth;
var index = this.index;
var pageCount = this.pages.length;

// 判断当前是否是 tap事件(轻触事件)
if (dragDuration < 300) {
let fireTap = Math.abs(offsetLeft) < 5 && Math.abs(offsetTop) < 5;
if (isNaN(offsetLeft) || isNaN(offsetTop)) {
fireTap = true;
}
if (fireTap) {
this.$children[this.index].$emit('tap'); // 当前轮播图item发送给外部的tab事件
}
}
// 触发时长小于300ms,并且没有执行touchmove事件, 不处理
if (dragDuration < 300 && dragState.currentLeft === undefined) return;

if (dragDuration < 300 || Math.abs(offsetLeft) > pageWidth / 2) {
towards = offsetLeft < 0 ? 'next' : 'prev';
}

if (!this.continuous) { // 当前不支持循环, 向前或向后 都回到当前页面
if ((index === 0 && towards === 'prev') || (index === pageCount - 1 && towards === 'next')) {
towards = null;
}
}

if (this.$children.length < 2) {
towards = null;
}
// 动画的方式切换到指定的item
this.doAnimate(towards, {
offsetLeft: offsetLeft,
pageWidth: dragState.pageWidth,
prevPage: dragState.prevPage,
currentPage: dragState.dragPage,
nextPage: dragState.nextPage
});

this.dragState = {};// 清空dragState
}

判断当前是否是tap事件，并且确定下面要切换到哪个item。

下面来看doAnimate动画的方式切换的实现：

doAnimate(towards, options) {
if (this.$children.length === 0) return;
if (!options && this.$children.length < 2) return;

var prevPage, nextPage, currentPage, pageWidth, offsetLeft;
var speed = this.speed || 300;
var index = this.index;
var pages = this.pages;
var pageCount = pages.length;

if (!options) { // 没有options,是 自动播放或手动触发切换页面的处理
pageWidth = this.$el.clientWidth;
currentPage = pages[index];
prevPage = pages[index - 1];
nextPage = pages[index + 1];
if (this.continuous && pages.length > 1) {
if (!prevPage) {
prevPage = pages[pages.length - 1];
}
if (!nextPage) {
nextPage = pages[0];
}
}
// 将 prevPage 和 nextPage 定位到应该的位置(也就是开始执行切换页面的位置)
if (prevPage) {
prevPage.style.display = 'block'; // 显示出来
this.translate(prevPage, -pageWidth); // 移到当前index的前面
}
if (nextPage) {
nextPage.style.display = 'block';
this.translate(nextPage, pageWidth); // 移到当前index的后面
}
} else {
prevPage = options.prevPage;
currentPage = options.currentPage;
nextPage = options.nextPage;
pageWidth = options.pageWidth;
offsetLeft = options.offsetLeft;
}
// 确定 要切换的item的索引
var newIndex;

var oldPage = this.$children[index].$el;

if (towards === 'prev') {
if (index > 0) {
newIndex = index - 1;
}
if (this.continuous && index === 0) {
newIndex = pageCount - 1;
}
} else if (towards === 'next') {
if (index < pageCount - 1) {
newIndex = index + 1;
}
if (this.continuous && index === pageCount - 1) {
newIndex = 0;
}
}

var callback = () => { // 动画完成的回调: 重置dom的样式信息
if (newIndex !== undefined) {
// 重置dom的样式信息
var newPage = this.$children[newIndex].$el;
removeClass(oldPage, 'is-active'); // is-active 设置当前item的display:block
addClass(newPage, 'is-active');

this.index = newIndex;
}
if (this.isDone) { // 切换了页面,向外部发送切换页面完成的事件
this.end();
}

// 在touchStart 时设置的style中的display清空, 也就是使用class里面的display:none隐藏属性
if (prevPage) {
prevPage.style.display = '';
}

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

setTimeout(() => {
if (towards === 'next') { // 切换到下一页
this.isDone = true;
this.before(currentPage); // 执行切换页面之前,向外部发送事件
this.translate(currentPage, -pageWidth, speed, callback);
if (nextPage) {
this.translate(nextPage, 0, speed);
}
} else if (towards === 'prev') { // 切换到上一页
this.isDone = true;
this.before(currentPage);
this.translate(currentPage, pageWidth, speed, callback);
if (prevPage) {
this.translate(prevPage, 0, speed);
}
} else { // 回到当前页面,不切换页面
this.isDone = false; // 当前没有进入到前一个页面和后一个页面, 还是回到当前页面
this.translate(currentPage, 0, speed, callback);
if (typeof offsetLeft !== 'undefined') {
if (prevPage && offsetLeft > 0) {
this.translate(prevPage, pageWidth * -1, speed);
}
if (nextPage && offsetLeft < 0) {
this.translate(nextPage, pageWidth, speed);
}
} else {
if (prevPage) {
this.translate(prevPage, pageWidth * -1, speed);
}
if (nextPage) {
this.translate(nextPage, pageWidth, speed);
}
}
}
}, 10);
}

此函数代码比较，但是不难，结合上面的注释，应该很容易读懂。实现：如果没有options(手动触发切换页面)，会生成options中的信息(也就是下面处理需要用到的数据)，并把prev和next两个dom定位到指定的位置；然后执行切换页面的操作，并且在结束的回调中重置相应dom的样式以及当前选中的index。

下面来看 手动触发的切换页面的代码

next() { // 切换到下一个页面
this.doAnimate('next');
},

prev() { // 切换到上一个页面
this.doAnimate('prev');
}

最后，来看自动播放的代码：

initTimer() {
if (this.auto > 0) {
this.timer = setInterval(() => {
// 如果不支持循环播放,并且当前播放到了 末尾位置,  停止定时器
if (!this.continuous && (this.index >= this.pages.length - 1)) {
return this.clearTimer();
}
if (!this.dragging && !this.animating) { // 没有在拖动, 也没有执行动画
this.next(); // 播放下一个item
}
}, this.auto);
}
}

读懂了doAnimate函数了，就很简单了。

总结

了解了一种新的轮播图的实现方式

两个轮播图的实现方式的差别以及性能的比较

touch事件边界条件的处理，比如tap事件的判断，横纵向滚动的判断