干货--手把手撸vue移动UI框架：滑动轮播

前言

昨天写了一篇侧边菜单组件的文章，阅读人数挺多的，内心很欣喜（偷着乐，第一篇文章有这么多人看）！乘着这股劲，今天在继续写一篇我们平时工作中更常用的滑动轮播组件的文章。

效果展示

老规矩，咱们先看做成后的效果，然后咱们再一步步的开始制作：

组件组成分析

在实际的工作中，咱们轮播中的内容形式可能有很多种：图片、文本、视频、其他DOM结构等。所以咱们的轮播组件必须能满足这几种应用情况。那么我们可以把组件分两部分：

1. 可以高度定制的子组件，负责渲染轮播中的每一个子项
2. 负责轮播的父组件，用来处理通用的滑动事件、自动轮播、指示器等功能

我们现在这定义子组件的名称为swiper-item;父组件名称为swiper

DOM组成

首先咱们的子组件中负责渲染自定义的内容，则子组件中需要一个插槽slot。

swiper-item:

<template>
  <div class="r-swiper-item">
    <slot></slot>
  </div>
</template>

其次父组件中负责通用的功能，以及轮播的整体架构，其DOM结构如下。

swiper:

<template>
  <div class="r-swiper">
    <slot></slot>
    <slot name="indicator">
      <div class="indicator"></div>
    </slot>
  </div>
</template>

默认插槽在使用的时候渲染咱们轮播的子项，通常为swiper-item；indicator插槽用来自定义指示器的样式，因为在实际使用过程中指示器样式很可能是需要定制的。

css样式

移动端的视图大小有限，子项的大小一般是父组件的全部可视视图。
swiper-item:

<style lang="scss">
.r-swiper-item{
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
}
</style>

下面的vw是一种移动端的适配方案（）。其他的适配方案还有淘宝的flexible，这个css大家根据自己的适配方案更改下，这里不做过多描述，大家感兴趣的自行百度。
swiper:

<style lang="scss">
.r-swiper{
  position: relative;
  overflow: hidden;
  .indicator{
    position: absolute;
    right: 3vw;
    bottom: 3vw;
    width: 10vw;
    height: 10vw;
    line-height: 10vw;
    border-radius: 5vw;
    text-align: center;
    background-color: rgba(0,0,0,.5);
    color: #fff;
    font-size: 14px;
  }
}
</style>

javascript

老规矩，写JS代码前咱们先理清交互逻辑：

1. 页面渲染开始，首先把所有子组件挂载到DOM上，当所有子节点挂载好了后初始化父组件
2. 同理，当轮播组件销毁的时候先销毁子组件，再销毁父组件

3. 初始化的时候需要：

   1. 获取父组件容器DOM节点、以及父组件节点的宽度
   2. 获取到所有子组件节点
   3. 给所有子节点依次设置好初始坐标
   4. 给父节点绑定touch事件
4. 初始化完成后，当手指触摸到屏幕瞬间，记录当前手指起始的坐标
5. 当手指移动的过程中，阻止页面中的默认事件，根据当前坐标以及起始坐标计算手指X、Y轴移动的距离
6. 如果X轴移动比Y轴多则判断手指在横向移动，否则为竖向移动
7. 如果横向移动则移动子项中的位置，修改所有子项的坐标
8. 手指离开屏幕的时候判断手指移动总距离，如果大于一个临界值则轮播切换到下一屏或者上一屏（根据滑动方向判定），否则重置会原始状态

swiper-item:

export default {
  mounted () {
    this.$nextTick(() => {
      this.$parent.init()
    })
  },
  beforeDestroy () {
    this.$nextTick(() => {
      this.$parent.destroy()
    })
  }
}

swiper:

<template>
  <div ref="swiper" class="r-swiper" :class="r-swiper" :src="https://segmentfault.com/img/remote/1460000013625398?w=600&h=900">