vue-awesome-swiper上下滚动

以下是使用vue-awesome-swiper实现上下滚动的方法：

1.首先安装swiper和vue-awesome-swiper插件：

npm install swiper@4.5.1 vue-awesome-swiper@3.1.3 --save

2.在需要使用的组件中引入swiper和vue-awesome-swiper：

import Vue from 'vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

3.在组件中使用swiper和vue-awesome-swiper：

<template>
  <div class="swiper-container" ref="mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in list" :key="index">{{ item }}</div>
    </div>
    <div class="swiper-pagination" slot="pagination"></div>
  </div>
</template>

<script>
export default {
  components: {
    swiper,    swiperSlide
  },
  data() {
    return {
      list: ['第一条公告', '第二条公告', '第三条公告', '第四条公告', '第五条公告']
    }
  },
  mounted() {
    this.$nextTick(() => {
      new this.$swiper(this.$refs.mySwiper, {
        direction: 'vertical',
        autoplay: true,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      })
    })
  }
}
</script>

<style>
.swiper-container {
  height: 200px;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #fff;
}
.swiper-pagination-bullet-active {
  background-color: #fff;
}
</style>

4.在上面的代码中，我们使用了swiper的direction属性来设置滚动方向为垂直方向，同时使用了autoplay和loop属性来实现自动播放和循环播放。我们还使用了pagination属性来添加分页器，使用户可以手动切换公告。