element 源码学习六 —— Carousel 走马灯学习

发表于 | 更新于

简单使用

走马灯功能在展示图片时经常用到，而 element 中提供了 Carousel 组件。出于好奇学习一下它的实现原理。
具体的功能详情请查阅官方文档。
关于组件属性，该组件提供了组件高度、索引、指示器、切换时间等一众配置，这个只要动手试一遍都能理解。
关于事件，提供了一个 change 事件。可以通过 v-on:change="changeFun" 事件绑定来监听。该事件传递了两个参数：当前页索引和前一页索引。参考源码中的 $emit 方法：

1
2
3
4
5
6
watch: {
  activeIndex(val, oldVal) {
    this.resetItemPosition(oldVal);
    this.$emit('change', val, oldVal);
  },
},

关于方法，组件提供了三个方法用于操作组件页面的切换。使用方法是通过 $ref 子组件引用来访问子组件，执行其方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 假设为 el-carousel 设置了 ref="car"
// setActiveItem	手动切换幻灯片	需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item 的 name 属性值
// prev	切换至上一张幻灯片
// next 切换至下一张幻灯片
pre() {
    this.$refs.car.prev()
},
next() {
    this.$refs.car.next()
},
first() {
    this.$refs.car.setActiveItem(0)
}

源码位置

Carousel 的源码位于 package/carousel/ 目录下。源码目录如下：
源码目录

简单说下目录内容：

  • item.vue carousel-item 组件代码
  • main.vue carousel 组件代码
  • _index.js 导出 carousel-item 和 carousel
  • cooking.conf.js cooking 配置
  • index.js 导出 carousel 组件
  • package.json 组件信息
  • index.js 导出 carousel-item 组件

其实主要就是两个 .vue 文件，其他都是些配置、导出的功能文件，这里可以忽略不看~

源码解析

老规矩，我们通过几个问题切入去看源代码。

1. 基本原理：页面切换 + 指示器 + 切换按钮的实现

页面切换

看了一下 DOM 的 Elements 排列，发现页面切换使用的是 transform 2D 转换和 transition 过渡。
一般页面切换其实是几个页面使用 translateX 进行位移切换。
一般页面结构

而卡片变化切换同时使用了 translateX 位移和 scale 缩放实现中间一张卡最大，左右卡片小的效果的。
卡片化

而卡片的层叠使用 z-index 值得大小来实现。
所以，逻辑计算只需要根据当前显示页面计算下每个页面的位移值。而 carousel-item 中也的确有计算的逻辑：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// item.vue
// index 当前 item 索引
// activeIndex 激活的 item 索引
// oldIndex 之前 item 索引
translateItem(index, activeIndex, oldIndex) {
  // 获取父元素宽度 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
  const parentWidth = this.$parent.$el.offsetWidth;
  // 获取 item 页面数量
  const length = this.$parent.items.length;
  // 判断是否需要过渡动画 class
  // .el-carousel__item.is-animating {
  //  transition: transform 0.4s ease-in-out;
  // }
  if (this.$parent.type !== "card" && oldIndex !== undefined) {
    this.animating = index === activeIndex || index === oldIndex;
  }
  // 处理 index
  if (index !== activeIndex && length > 2) {
    index = this.processIndex(index, activeIndex, length);
  }
  if (this.$parent.type === "card") {
    // 卡片化
    this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1; // 激活组件及其前后组件定义 cursor: pointer; z-index: 1;
    this.active = index === activeIndex; // 激活 class
    // 计算卡片化偏移量
    this.translate = this.calculateTranslate(
      index,
      activeIndex,
      parentWidth
    );
    // 激活卡片不缩放，其他卡片缩放为 0.83
    this.scale = this.active ? 1 : CARD_SCALE;
  } else {
    // 非卡片化
    this.active = index === activeIndex; // 激活 class
    this.translate = parentWidth * (index - activeIndex); // 计算位移 根据父组件宽度计算
  }
  // 计算完后显示
  this.ready = true;
},

指示器

指示器就是多个 button 组成的横向列表，根据当前显示页面修改某个指示器背景颜色。

1
2
3
4
5
6
7
8
9
10
11
12
<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>

切换按钮

切换按钮其实就是两个 absolute 的按钮，点击实现页面切换即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<transition name="carousel-arrow-left">
  <button
    type="button"
    v-if="arrow !== 'never'"
    v-show="arrow === 'always' || hover"
    @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"
    @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>

这里要注意的就是按钮外包裹了 标签来实现按钮进入和离开的过渡效果。

2. 页面切换动画如何实现？

其实在基本原理里面都提到了，可以从源码中找到两个样式：

1
2
3
4
5
6
7
8
9
# 内联样式
element.style {
  transform: translateX(888.56px) scale(0.83);
}

# 过渡样式
.is-animating {
  transition: transform 0.4s ease-in-out;
}

静态情况下，使用 transitionX 维持页面位置，显示当前页面。过渡行为时，加入 0.4 秒的 transition 过渡效果。

3. 卡片化如何实现效果？

卡片化切换其实和一般的切换差不多，只是显示卡片从一张变为三张。中间的卡片 z-index 为 2，而左右的卡片 z-index 为 1，从而实现中间卡片在前面的样式。而计算三张卡片位置的方法如下：

1
2
3
4
5
6
7
8
9
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;
  }
},

而卡片的宽度为容器宽度的一半~左右两边的卡片缩放了 83% 。

1
2
3
4
5
6
7
8
.el-carousel__item--card {
  width: 50%;
  transition: transform 0.4s ease-in-out;
}

element.style {
  transform: translateX(-39.44px) scale(0.83)
}

总结下：

  • 显示三张卡片。
  • 三张卡片高度跟随容器，宽度为容器的 50%。
  • 左右两张卡片缩放了 83% 大小。
  • 左右两张卡片 z-index 为 1；中间卡片 z-index 为 2。

4. 按钮出现和消失的效果如何实现？

使用了 vue 的 transition 标签来实现。具体效果为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.el-carousel__arrow {
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  height: 36px;
  width: 36px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 50%;
  background-color: rgba(31, 45, 61, 0.11);
  color: #fff;
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
}

.carousel-arrow-left-enter,
.carousel-arrow-left-leave-active {
  transform: translateY(-50%) translateX(-10px);
  opacity: 0;
}

.carousel-arrow-right-enter,
.carousel-arrow-right-leave-active {
  transform: translateY(-50%) translateX(10px);
  opacity: 0;
}

实现的效果为：左边箭头向从左边 10px 位置进入和离开，而右边箭头从右边 10px 位置进入和离开。而 translateY 是为了垂直居中。

5. 如何实现自动切换功能？

使用 setInterval 方法来实现定时向后切换页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
playSlides() {
  if (this.activeIndex < this.items.length - 1) {
    this.activeIndex++;
  } else {
    // 如果是最后一页则跳转到第一页
    this.activeIndex = 0;
  }
},
// 取消 timer
pauseTimer() {
  clearInterval(this.timer);
},
// 开始 timer
startTimer() {
  if (this.interval <= 0 || !this.autoplay) return;
  this.timer = setInterval(this.playSlides, this.interval);
},

自己实现个走马灯玩玩~

学以致用，这里写个简单的 demo，实现下走马灯功能。
例一：走马灯效果
例二：卡片化走马灯效果
其中，例一和例二实现了走马灯和卡片化的自动切换、手动切换、切换效果。
这里留了一个问题待解决：

  • 走马灯中第一页和最后一页的切换如何做到更好？

这些问题将会尽快解决！

最后

至此，我们了解了走马灯的实现原理，以及一些小功能的实现。最后也用两个例子证明了我们的分析。

Vue 实验室

《Vue 实验室》 至今也写了不少了，作者将在把最后几篇计划中的博客写完后，以当前的知识认知水平重新改进《Vue 实验室》往期的文章，并整理到 gitbook 中便于读者阅读，敬请期待。