vue 結合swiper插件實現廣告公告上下滾動的效果

最近做到的項目里面需要廣告公告上下滾動，網上也找了很多例子，效果總是不理想，所以就想着利用輪播圖的豎直方向的滾動來實現這個效果

一、在項目里面安裝swiper插件

通過npm安裝: npm install vue-awesome-swiper --save

二、在main.js里面引入

import 'swiper/dist/css/swiper.css'

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

<template>
    <!-- <div class="page"> -->
    <div class="main">
        <div class="main_con">
                <div class="nwwest-roll">
                    <swiper class="roll-ul" :options="swiperOption" ref="mySwiper" v-if="topMovieLists.length>0" >
　　　　　　　　　　　　　　　//父容器里面的v-if="topMovieList.length>0"是必須寫的，否則將不起作用

                        <swiper-slide v-for="(item,index) in topMovieLists" :key="index" >
                        //這里放着每個列表里面的內容
    
                        </swiper-slide>
                    </swiper>
                </div>

            </div>
        </div>

    </div>

    <!-- </div> -->
</template>

<script>
let vm = null;
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Vue from 'vue';
export default {
    name: 'Home',
    components: {
        Empty,
        ProjectList,
        swiper,
        swiperSlide
    },
    data() {
        return {
            swiperOption: {
                notNextTick: true,
                 direction: "vertical",   //控制滾動的方向
                paginationClickable: true,
                autoplay: {
                    delay:2000  //這里需要注意，如果想每2秒去自動切換，直接autoplay:2000是失效的，
                },
                loop: true,
                on:{
                    click:function(e){
　　　　　　　　　　　　　　//注意點：想要給滾動的列表的每一項加上點擊事件，需要在這個回調里面進行，否則不起作用
                         let realIndex = this.realIndex;
                        //  console.log(e,'輪播')
                         vm.jumpDesc(realIndex)  //這里調用的是定義在methods里面的方法
                    }
                }
            },
            topMovieLists: [], //影視頭條列表
            
        }
    },
    mounted() {        
    },
    created() {
　　　　vm = this;
    },
    methods: {


    }
}
</script>