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>