vue-awesome-swiper 实现走马灯式滚动

html

            <div class="scoll-section">
                <div class="scoll-left" v-if="leftList.length > 0">
                     <swiper ref="mySwiper" :options="swiperOption">
                        <swiper-slide v-for="(item, index) in leftList" :key="index">
                            <p class="scoll-item">
                                <img src="./images/icon_laba@2x.png" alt="">
                                <span class="name">{{ item.nickname }}</span>刚被<span class="score-num">助力{{ item.score }}</span>真爱值
                            </p>
                        </swiper-slide>
                    </swiper>
                </div>

这里有点要注意 要用v-if判断有数据再渲染 不然等页面渲染好再赋值swiper会失效

css 这里让swiper匀速滚动，注意这里样式要写全局，不能在scoped里面

.scoll-section .swiper-wrapper{
    transition-timing-function:linear !important;
}

这里引入

import { swiper, swiperSlide } from 'vue-awesome-swiper'

注册

    computed: {
        swiper () {
            return this.$refs.mySwiper.swiper
        }
    },
    components: { swiper, swiperSlide },

初始化，我这里是一屏显示3条，delay可以写10或1，表示切屏时无延迟

    data () {
        return {
            swiperOption: {
                loop: true,
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true, //修改swiper的父元素时，自动初始化swiper
                autoplay: {
                    delay: 10,
                    stopOnLastSlide: false,
                    disableOnInteraction: false
                },
                direction: 'vertical',
                speed: 2000,
                slidesPerView: 3,
                allowTouchMove: false
            },
            leftList: [],
    },

请求接口给swiper赋值

this.leftList = response.data.leftList 

总的来说是比较简单的，但是我一开始写静态页面的时候swiper是没问题的，但是一调接口就有问题了，这个问题找了好久，最后用v-if解决。
over