Vue过渡实现轮播组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/latency_cheng/article/details/83379889

        轮播组件的使用非常广泛，与前写的swiper不同，这个组件实现的是自动轮播的功能。先上效果图：

        纵向滚动的轮播一般适用于一些信息的滚动展示

        横向滚动的轮播一般适用于banner图的变换

        这种组件写起来也其实也不算复杂，但是用Vue的transition组件会更加简单。

1、Vue过渡组件transition

        简单介绍一下Vue的过渡组件transition，更详细的请看文档。

        Vue 提供了 transition 的封装组件，可以在条件渲染（v-if）和条件展示（v-show）时，为任何元素和组件添加进入/离开的过渡效果。列表的过渡使用transition-group组件，使用tag属性来指定呈现的元素。

过渡的类名

        在进入/离开的过渡中，会有 6 个 class 切换：v-enter、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to。通过为<transition>添加name属性，可以实现自定义的类名。

JavaScript钩子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

2、轮播的代码实现

        使用<transition-group>并指定tag="ul"来渲染列表，<li>元素中使用currentIndex === index来判断元素是否展示。<img-scroll-item>组件是轮播的内容，这个例子中就是一张图片。

<div class="acs_img-scroll" v-if="myList && myList.length">
    <transition-group
    tag="ul"
    class='ac_scroll-ul'
    name="list"
    @after-leave="autoPlay">
        <li
            class="ac_scroll-item"
            v-for="(item, index) in myList"
            :key="index"
            v-show="currentIndex === index"
            @click="click($event, item)">
                <img-scroll-item
                    :scrollItem="filterItem(item)">
                </img-scroll-item>
        </li>
    </transition-group>
</div>

        监测after-leave事件，在元素离开后改变currentIndex的值，来展示下一个元素。

autoPlay() {
    setTimeout(() => {
        this.currentIndex++;
        if (this.currentIndex > this.list.length - 1) {
            this.currentIndex = 0;
        }
    }, 2000);
},

        进入时，元素的偏移从100%过渡到0，离开时，从0过渡到-100%，横向滚动使用translateX，纵向滚动则translateY。

.acs_img-scroll{
    height: 100%;
    overflow: hidden;
    .ac_scroll-ul{
        position: relative;
        .ac_scroll-item {
            position: absolute;
        }
        .list-enter-to {
            transition: all 2s ease;
            transform: translateX(0);
        }
        .list-leave-active {
            transition: all 2s ease;
            transform: translateX(-100%)
        }
        .list-enter {
            transform: translateX(100%)
        }
        .list-leave {
            transform: translateX(0)
        }
    }
}

        以上就是全部代码了，非常简单就实现了轮播效果。