这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

轮啊轮播图

为什么放在布局组件？

我的天啊，这个作者肯定脑子抽了， 轮播图一看就是业务组件啊，他居然当成布局组件，肯定是瞎写，关了关了。

欸，别急着走啊，换个角度思考下，难道这么一个不知名作者将它放在布局组件的队列里面没有他的深意嘛？

仔细回想下，1202年的今天，前端UI日新月异，网页模块千变万化，组件库层出不穷的当下，轮播这个东西是不是早就成为大多数网页中的一个重要信息展示模块了。

君不见，即便是掘金这样的内容社区都用上轮播来展示信息，更遑论其他的大多数网站呢？

~~好了，吹的差不多了，这里接个广告，有人联系的话，下次我就把【掘金】换成金主大腿指定的词了。~~

分析一波常见的轮播图组件

这里就不尬吹了，简单的分析下常见的轮播都啥样子。

鉴于掘金签到页的轮播图不具备市场普遍性，所以就不谈他了，另找一个比较有代表性的轮播来分析下。

所以这里看向了掘金创作者中心，这个轮播比较适合轻微分析一下了，然后基于此完善一下其他常见的功能。

在创作者中心这里轮播可以看到主要有两大功能，自动滚动与点击下方的点跳转到指定的轮播页。

当鼠标停留时会停止滚动，没录到，嘻嘻嘻。

相比起常见的轮播图的话，少了左右两侧的按钮。

此外，掘金这边的轮播不支持拖动像两侧滚动。这一点也可以自己考虑是否添加。

开始吧。

轮播图的主要功能列举一下：

1、自动滚动

2、点击下方点跳转

3、鼠标经过停止滚动

4、两侧控制按钮

5、拖拽滚动。

确定了要完成的功能，就可以去打开可爱的编辑器，开始快乐的开耕播种了。

先铺垫结构。

先从简单的开始吧，父级结构要负责主要框架以及逻辑主要逻辑部分，而轮播页就是个简单的容器，所以这里先说轮播页。

简单的处理方法，就是直接写个slot让开发者填充内容，友善一点就加上动画组件transition就完事了。

block content
transition(
  :name="inName"
  mode="out-in"
)
  div(
    class="yx-carousel-item"
    v-show="isShow"
  )
    slot

那么父级结构呢？

先抛出逻辑部分来说，再看掘金的这个轮播，父级就要承担控制点,内容尺寸等几个木块，但其实也都是比较简单的部分。如果要做成常见的轮播则再加上控制控制按钮的部分。

block content
  div(
    class="yx-carousel"
    :style="`width: ${width}; height: ${height}`"
    @mouseover="mouseover"
    @mouseleave="mouseleave"
  )
    /* 控制按钮 */
    div(
      class="yx-carousel-left"
      @click="setCarousel(-1, 'slide-left')"
    )
      yx-icons.yx-icon-chevron-left(type="arrow-left")
    div(
      class="yx-carousel-right"
      @click="setCarousel(1, 'slide-right')"
    )
      yx-icons.yx-icon-chevron-right(type="arrow-right")
    // 轮播页容器
    div.yx-carousel-warp
      slot
    // 控制点
    div.yx-carousel-dot
      i(
        v-for="(item, i) in items"
        :key="i"
        :class="{active: inActive === i}"
        @click="handerDot(i)"
      )

样式的部分包括这部分的结构大家尽可以自由发挥，并没有固定的套路。

逻辑部分

这一块的逻辑部分相对也是比较简单的。

先从动画控制开始，通过定时器控制滚动效果，鼠标经过时清楚定时器，否则重新开始及时。

let time = null;
const timeStop = () => {
  if(time){
    clearInterval(time);
    time = null;
  }
}
const timeStar = () => {
  if(autoplay && autoplay.value && !time){
    time = setInterval(() => {
      setCarousel(1, 'slide-right'); // 下面完善
    }, interval.value * 1000)
  }
}
const mouseover = () => {
  timeStop()
}
const mouseleave = () => {
  timeStar()
}

在上面的滚动中，有个设置轮播页的函数，这里把他完善下。

const setCarousel = (i, name) => {
  inActive.value += i;
  transitionName.value = name;

  if(inActive.value < 0){
    inActive.value = items.length - 1;
  }

  if(inActive.value >= items.length){
    inActive.value = 0
  }
}

有了控制轮播页的函数之后，控制点事件就很简单了。

const handerDot = i => {
  const now = i - inActive.value;
  setCarousel(now, now < 0 ? 'slide-left' : 'slide-right')
}

最后

轮播这个组件的逻辑也是属于比较简单的一类，可以自由发挥的地方比较多，可以根据业务需求实际调整开发。

此外，常见的轮播中，会有出现控制点在图内，以及图外的情况，这里可以给它几个参数来控制下。

如果是自己的项目的话，可以更灵活，如果是业务需求的话，就按照业务需求了。一个项目内还是比较注重一致性的。

Vue3从0到1组件开发-布局组件：Carousel轮播图