VUE轮播图实现过程及踩坑

前言

学习了原生js实现轮播图的过程，看完感觉太麻烦了，正好最近在学习vue，就想试着用vue来实现一遍

参考地址

网上看到别人的例子
VUE离开过渡效果 - 官方文档
提供思路的博客

思路

1. 原生js实现方式是在li列表最后一张图的后面再复制一个第一张图，然后再最后一张图按下一张的按钮时就可以无缝滑动到第一张，此时再取掉动画效果，改变ul的left值为0即第一张的位置，在用户看来就是回到了第一张图片，从而达到无缝滚动的效果
2. 由于使用原生js实现的时候是通过改变图片列表的ul的left值，按照这个思路实现了，但是到第一张和最后一张切换的时候不知道怎么实现无缝滚动，如果按照上一条的方式会操作dom，在vue中操作dom还是不太好，所以放弃了；

参考代码：

      <ul
          v-bind:style="{left:currentIndex*-750+'px',
          width:imgs.length*100+'%',
          position:'absolute',
          transition:' all 0.5s ease-in-out'}"
        >
          <li v-for="(items,index) in imgs">
            <transition name="image">
              <img :src="items" />
            </transition>
          </li>
        </ul>

完整代码:在线运行

3. 最开始想到的是通过控制currentIndex来切换显示，如下代码所示:

        <ul>
            <li :key="currentIndex">
              <img v-bind:src="imgs[currentIndex]"  alt="">
            </li>
        </ul>

但是这样在切换的时候比较生硬，没有动画切换效果，但是最基本的图片切换的目的达到了（参考了网上的一些教程，好多都是停在这一步就没有继续了，那这个教程的意义在哪...）

后来参考网上看到别人的例子使用transition标签，通过控制过渡样式，达到轮播图的效果，代码如下图所示：

        <ul>
          <transition name="image">
            <li :key="currentIndex">
              <img v-bind:src="imgs[currentIndex]"  alt="">
            </li>
          </transition>
        </ul>

css样式：

.image-enter-active,
.image-leave-active {
  transition: all 1s ease-in-out;
}

.image-leave-to {
  transform: translateX(-100%);
}

.image-leave {
  transform: translateX(0);
}

.image-enter-to {
  transform: translateX(-100%);
}

.image-enter {
  transform: translateX(0);
}

这样看起来滑动效果很连贯，而且最后一张到第一张图片的过渡也没有问题，唯一的问题在于如果多次快速点击切换图片按钮会看到很明显的bug，这个问题的解决办法目前还没有想到

该思路的完整代码:在线运行

最后考虑改变过渡的动画样式，最终在视觉上看起来好像是没有问题了，参考代码:

.lunbo ul li {
  position: absolute;
  width: 100%;
}

.lunbo ol li {
  float: left;
  position: relative;
}

...

.image-enter-active,
.image-leave-active {
  transition: all 1s;
}

.image-enter,
.image-leave-active {
  opacity: 0;
}

.image-enter {
  transform: scale(.8, .8)
}

.image-leave-active {
  transform: translateX(-100%);
}

最终成果

在线运行