swiper 垂直滚动

<template>
  <div style="height: 100%;width: 100%;">
    <swiper
      :direction="'vertical'"
      :loop='true'
      :allowTouchMove='false'
      :observer='true'
      :observeParents='true'
      :autoplay="{
        delay: 2500,
        disableOnInteraction: false,
      }"
      :modules="modules"
      :slidesPerView='4'
    >
      <swiper-slide v-for="(cItem, index) in WarnData" :key="index">
        {{ cItem.path }}
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
import 'swiper/css';

let vm = null
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      modules: [Autoplay],
      WarnData: [
        { path: 'WarnTable1', title: 'slide1', code: '1', quantity: 20, amount: 100 },
        { path: 'WarnTable2', title: 'slide2', code: '2', quantity: 20, amount: 100 },
        { path: 'WarnTable3', title: 'slide3', code: '3', quantity: 20, amount: 100 },
        { path: 'WarnTable4', title: 'slide4', code: '4', quantity: 20, amount: 100 },
        { path: 'WarnTable5', title: 'slide5', code: '5', quantity: 20, amount: 100 },
        { path: 'WarnTable5', title: 'slide5', code: '5', quantity: 20, amount: 100 },
        { path: 'WarnTable5', title: 'slide5', code: '5', quantity: 20, amount: 100 },
        { path: 'WarnTable5', title: 'slide5', code: '5', quantity: 20, amount: 100 },
        { path: 'WarnTable5', title: 'slide5', code: '5', quantity: 20, amount: 100 },
        { path: 'WarnTable5', title: 'slide5', code: '5', quantity: 20, amount: 100 },
        { path: 'WarnTable5', title: 'slide5', code: '5', quantity: 20, amount: 100 },
        { path: 'WarnTable5', title: 'slide5', code: '5', quantity: 20, amount: 100 },
      ]
    }
  },
  activated() {
  // 看自己的需求，本项目点击slide之后需要跳转到详情，但是这个页面没有关闭，所以需要重新初始化，不然再回到这个页面，slide就不会自动滚动了
    this.init()
  },
  mounted() {
  },
  methods: {
    
  }
}
</script>

<style lang="less" scoped>
// @import 'swiper.css';
.swiper {
  height: 500px;
  width: 100%;
}
  .warn_table_ul {
    margin: 0;
    width: calc(100% - 10px);
    padding: 0 5px;
    .warn_table_li {
      width: 100%;
      height: 3.0625rem;
      background: #062B57;
      font-size: 1rem;
      color: #D7E9EE;
      margin-bottom: 1.5rem;
      &:hover{
        cursor: pointer;
        background: #143C6C;
      }
      &:last-child{
        margin-bottom: 0;
      }
      img{
        width: 1.5rem;
        height:1.5rem;
        margin-left: 0.8125rem;
        margin-right: 1.0625rem;
      }
      .flex-center-start{
        font-size: 1.125rem;
      }
      .flex-center-end{
        font-size: 1rem;
        color: #D7E9EE;
        span{
          margin-right: 0.8125rem;
          font-size: 1.25rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #FF3636;
        }
        .el-icon-caret-right{
          color: #3FADCC;
          font-size: 1rem;
          margin-left: 1.25rem;
          margin-right: 0.625rem;
        }
      }
    }
  }
</style>