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

最近作到的項目裏面須要廣告公告上下滾動，網上也找了不少例子，效果老是不理想，因此就想着利用輪播圖的豎直方向的滾動來實現這個效果

1、在項目裏面安裝swiper插件

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

2、在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>