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判斷有數(shù)據(jù)再渲染 不然等頁面渲染好再賦值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 

總的來說是比較簡單的，但是我一開始寫靜態(tài)頁面的時候swiper是沒問題的，但是一調(diào)接口就有問題了，這個問題找了好久，最后用v-if解決。
over