Carousel 走马灯源码解析
1. 基本原理：页面切换
页面切换使用的是 transform 2D 转换和 transition 过渡
可以看出是采用内联样式来实现的
举个栗子
<div :style="'transform: translateX('+ translate +'px);'">
</div>
data() {
return {
translate: 0
};
}
是不是感觉自己已经可以写个轮播图了
骚年莫慌 现在来看源码
main.vue
<template>
<!--走马灯的最外层包裹div-->
<div class="el-carousel"
:class="{ 'el-carousel--card': type === 'card' }"
@mouseenter.stop="handleMouseEnter"
@mouseleave.stop="handleMouseLeave">
<div class="el-carousel__container" :style="{ height: height }">
<!--左边的切换箭头-->
<transition name="carousel-arrow-left">
<button
type="button"
v-if="arrow !== 'never'"
v-show="(arrow === 'always' || hover) && (loop || activeIndex > 0)"
@mouseenter="handleButtonEnter('left')"
@mouseleave="handleButtonLeave"
@click.stop="throttledArrowClick(activeIndex - 1)"
class="el-carousel__arrow el-carousel__arrow--left">
<i class="el-icon-arrow-left"></i>
</button>
</transition>
<!--右边的切换箭头-->
<transition name="carousel-arrow-right">
<button
type="button"
v-if="arrow !== 'never'"
v-show="(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"
@mouseenter="handleButtonEnter('right')"
@mouseleave="handleButtonLeave"
@click.stop="throttledArrowClick(activeIndex + 1)"
class="el-carousel__arrow el-carousel__arrow--right">
<i class="el-icon-arrow-right"></i>
</button>
</transition>
<!--幻灯片内容显示区域-->
<slot></slot>
</div>
<!--底部的指示器列表，点击或hover时切换幻灯片-->
<ul
class="el-carousel__indicators"
v-if="indicatorPosition !== 'none'"
:class="{ 'el-carousel__indicators--labels': hasLabel, 'el-carousel__indicators--outside': indicatorPosition === 'outside' || type === 'card' }">
<li
v-for="(item, index) in items"
class="el-carousel__indicator"
:class="{ 'is-active': index === activeIndex }"
@mouseenter="throttledIndicatorHover(index)"
@click.stop="handleIndicatorClick(index)">
<button class="el-carousel__button"><span v-if="hasLabel">{{ item.label }}</span></button>
</li>
</ul>
</div>
</template>
<script>
//throttle节流函数
import throttle from 'throttle-debounce/throttle';
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
export default {
name: 'ElCarousel',
props: {
initialIndex: { //初始状态激活的幻灯片的索引，从 0 开始
type: Number,
default: 0
},
height: String, //走马灯的高度
trigger: { //指示器的触发方式
type: String,
default: 'hover'
},
autoplay: { //是否自动切换
type: Boolean,
default: true
},
interval: { //自动切换的时间间隔，单位为毫秒
type: Number,
default: 3000
},
indicatorPosition: String, //指示器的位置
indicator: {
type: Boolean,
default: true
},
arrow: { //切换箭头的显示时机 always/hover/never
type: String,
default: 'hover'
},
type: String, //走马灯的类型,card
loop: { //是否循环显示
type: Boolean,
default: true
}
},
data() {
return {
items: [], //幻灯片数组
activeIndex: -1, //标识当前幻灯片索引
containerWidth: 0,
timer: null,
hover: false //记录当前鼠标的移入状态
};
},
computed: {
hasLabel() {
return this.items.some(item => item.label.toString().length > 0);
}
},
watch: {
items(val) {
if (val.length > 0) this.setActiveItem(this.initialIndex);
},
activeIndex(val, oldVal) {
this.resetItemPosition(oldVal);
this.$emit('change', val, oldVal);
},
autoplay(val) {
val ? this.startTimer() : this.pauseTimer();
},
loop() {
this.setActiveItem(this.activeIndex);
}
},
methods: {
// 当鼠标移入
handleMouseEnter() {
// 当鼠标移入时，清空幻灯片播放的定时器，暂停自动切换。
this.hover = true;
this.pauseTimer();
},
// 当鼠标移出
handleMouseLeave() {
// 当鼠标移出，设置幻灯片自动播放定时器
this.hover = false;
this.startTimer();
},
itemInStage(item, index) {
const length = this.items.length;
// 满足当前为最后一个幻灯片；当前幻灯片在场景内；第一个幻灯片激活状态；
// 或者 满足 当前幻灯片在场景内；当前幻灯片后面有至少一个项目；当前幻灯片后面一个项目处于激活状态
if (index === length - 1 && item.inStage && this.items[0].active ||
(item.inStage && this.items[index + 1] && this.items[index + 1].active)) {
return 'left';
} else if (index === 0 && item.inStage && this.items[length - 1].active ||
(item.inStage && this.items[index - 1] && this.items[index - 1].active)) {
return 'right';
}
return false;
},
// 当鼠标移入左边的切换幻灯片的按钮
handleButtonEnter(arrow) {
this.items.forEach((item, index) => {
if (arrow === this.itemInStage(item, index)) {
item.hover = true;
}
});
},
handleButtonLeave() {
this.items.forEach(item => {
item.hover = false;
});
},
// 将所有的幻灯片放入items数组中
updateItems() {
this.items = this.$children.filter(child => child.$options.name === 'ElCarouselItem');
},
// 重置幻灯片位置
resetItemPosition(oldIndex) {
this.items.forEach((item, index) => {
item.translateItem(index, this.activeIndex, oldIndex);
});
},
//改变当前的幻灯片
playSlides() {
if (this.activeIndex < this.items.length - 1) {
this.activeIndex++;
} else if (this.loop) {
this.activeIndex = 0;
}
},
pauseTimer() {
// 清空定时器
clearInterval(this.timer);
},
startTimer() {
// 如果自动切换的时间间隔小于等于0时，或者用户未设置自动播放时，直接返回，幻灯片不自动播放
if (this.interval <= 0 || !this.autoplay) return;
this.timer = setInterval(this.playSlides, this.interval);
},
//设置当前页
setActiveItem(index) {
// 如果index是字符串，则是用户设置了幻灯片的name
if (typeof index === 'string') {
// 找到对应name的幻灯片
const filteredItems = this.items.filter(item => item.name === index);
// 如果找到的items长度大于0，取第一个的索引作为我们要使用的索引
if (filteredItems.length > 0) {
index = this.items.indexOf(filteredItems[0]);
}
}
// 索引转成数字
index = Number(index);
// 如果索引不是数字，或者不是整数
if (isNaN(index) || index !== Math.floor(index)) {
// 如果不是生产环境下，就报warn
process.env.NODE_ENV !== 'production' &&
console.warn('[Element Warn][Carousel]index must be an integer.');
return;
}
// 获取幻灯片数组的长度
let length = this.items.length;
const oldIndex = this.activeIndex;
// 如果索引小于0，判断是否设置循环播放，如果设置了，设置当前页为最后一页；也就是在向前切换到第一张，继续向前切换显示最后一张，然后显示倒数第二张
if (index < 0) {
this.activeIndex = this.loop ? length - 1 : 0;
} else if (index >= length) { //如果索引大于数组长度，判断是否设置循环播放，如果设置了，设置当前页为第一页；也就是在向后切换到最后一张时，继续向后切换显示第一张，然后显示第二张
this.activeIndex = this.loop ? 0 : length - 1;
} else { //否则，当前页设置为索引页
this.activeIndex = index;
}
if (oldIndex === this.activeIndex) {
this.resetItemPosition(oldIndex);
}
},
prev() {
this.setActiveItem(this.activeIndex - 1);
},
next() {
this.setActiveItem(this.activeIndex + 1);
},
handleIndicatorClick(index) {
this.activeIndex = index;
},
handleIndicatorHover(index) {
if (this.trigger === 'hover' && index !== this.activeIndex) {
this.activeIndex = index;
}
}
},
created() {
// throttle节流函数，点击频率控制，返回函数连续调用时 http://npm.taobao.org/package/throttle-debounce
// 第二个参数noTrailing，当其设置为true时，保证函数每隔delay时间只能执行一次，如果设置为false或者没有指定，则会在最后一次函数调用后的delay时间后重置计时器。
this.throttledArrowClick = throttle(300, true, index => {
this.setActiveItem(index);
});
this.throttledIndicatorHover = throttle(300, index => {
this.handleIndicatorHover(index);
});
},
mounted() {
this.updateItems();
this.$nextTick(() => {
addResizeListener(this.$el, this.resetItemPosition);
if (this.initialIndex < this.items.length && this.initialIndex >= 0) {
this.activeIndex = this.initialIndex;
}
this.startTimer();
});
},
beforeDestroy() {
if (this.$el) removeResizeListener(this.$el, this.resetItemPosition);
}
};
</script>
item.vue
<template>
<!--单个的幻灯片html结构-->
<div v-show="ready" class="el-carousel__item"
:class="{
'is-active': active,
'el-carousel__item--card': $parent.type === 'card',
'is-in-stage': inStage,
'is-hover': hover,
'is-animating': animating
}"
@click="handleItemClick"
:style="{
msTransform: `translateX(${ translate }px) scale(${ scale })`,
webkitTransform: `translateX(${ translate }px) scale(${ scale })`,
transform: `translateX(${ translate }px) scale(${ scale })`
}">
<div v-if="$parent.type === 'card'" v-show="!active" class="el-carousel__mask"></div>
<!--幻灯片的自定义内容以插槽的方式显示在此区域-->
<slot></slot>
</div>
</template>
<script>
const CARD_SCALE = 0.83;
export default {
name: 'ElCarouselItem',
props: {
name: String, //幻灯片的名字，可用作 setActiveItem 的参数
label: { //该幻灯片所对应指示器的文本
type: [String, Number],
default: ''
}
},
data() {
return {
hover: false,
translate: 0, //偏移量设置
scale: 1,
active: false,
ready: false,
inStage: false,
animating: false
};
},
methods: {
processIndex(index, activeIndex, length) {
if (activeIndex === 0 && index === length - 1) {
//当前是activeIndex是第一张，index是最后一张，返回-1，相差-1，表示二者相邻且在左侧
return -1;
} else if (activeIndex === length - 1 && index === 0) {
//当前页activeIndex是最后一张，index是第一张，返回length，相差1，表示二者相邻且在右侧
return length;
} else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
// 如果，index在activeIndex前一页的前面，并且之间的间隔在一半页数即以上，则返回页数长度+1，这样它们会被置于最右侧
return length + 1;
} else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
// 如果，index在activeIndex后一页的后面，并且之间的间隔在一般页数即以上，则返回-2，这样它们会被置于最左侧
return -2;
}
return index;
},
calculateTranslate(index, activeIndex, parentWidth) {
if (this.inStage) {
return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
} else if (index < activeIndex) {
return -(1 + CARD_SCALE) * parentWidth / 4;
} else {
return (3 + CARD_SCALE) * parentWidth / 4;
}
},
// 这是用来移动幻灯片。
translateItem(index, activeIndex, oldIndex) {
// 获取父组件的宽度
const parentWidth = this.$parent.$el.offsetWidth;
// 获取幻灯片数组的长度
const length = this.$parent.items.length;
// 如果不是card模式
if (this.$parent.type !== 'card' && oldIndex !== undefined) {
this.animating = index === activeIndex || index === oldIndex;
}
if (index !== activeIndex && length > 2 && this.$parent.loop) {
// 对当前索引进行处理
index = this.processIndex(index, activeIndex, length);
}
if (this.$parent.type === 'card') {
this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
this.active = index === activeIndex;
this.translate = this.calculateTranslate(index, activeIndex, parentWidth);
this.scale = this.active ? 1 : CARD_SCALE;
} else {
this.active = index === activeIndex;
// 设置幻灯片的偏移量
this.translate = parentWidth * (index - activeIndex);
}
this.ready = true;
},
handleItemClick() {
const parent = this.$parent;
if (parent && parent.type === 'card') {
const index = parent.items.indexOf(this);
parent.setActiveItem(index);
}
}
},
created() {
this.$parent && this.$parent.updateItems();
},
destroyed() {
this.$parent && this.$parent.updateItems();
}
};
</script>
至此 我们了解了走马灯的实现原理
要注意的就是按钮外包裹了 <transition> 标签来实现按钮进入和离开的过渡效果
能给自己一段温软的时光 让灵魂能安静的绽放……