Swiper6+版本 在vue中的应用，竖向滚动

Swiper6+版本 在vue中的应用，竖向滚动

本文采用的Swiper6.7.0版本
安装swiper

 cnpm install [email protected] -S

注意：如果需要设置禁止鼠标拖动，但是每条slide需要点击是这个属性allowTouchMove: false

数据结构：
WarnData: [
{ path: 'WarnTable', title: 'slide1', code: '1', quantity: 20, amount: 100 },
{ path: 'WarnTable', title: 'slide2', code: '1', quantity: 20, amount: 100 },
{ path: 'WarnTable', title: 'slide3', code: '1', quantity: 20, amount: 100 },
{ path: 'WarnTable', title: 'slide3', code: '1', quantity: null, amount: 100 },
{ path: 'WarnTable', title: 'slide5', quantity: null, code: '1', amount: 100 }
]

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper warn_table_ul">
      <div v-for="(item, index) in value" :key="index" :data-code="item.wtype" data-path="DetailTable" :data-title="item.wtypeText" class="flex-center-space warn_table_li swiper-slide">
        <div class="flex-center-start">
          <img :src="icon">
          {{ item.wtypeText }}
        </div>
        <div class="flex-center-end">
          <span>{{ item.quantity ? item.quantity + '/' : '' }}{{ item.amount }}</span>
          {{ item.quantity ? '台/' : '' }}万
          <i class="el-icon-caret-right" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// Swiper6+版本  配置参考：https://swiperjs.com/migration-guide
import Swiper, { Autoplay } from 'swiper'
import 'swiper/swiper.min.css'
Swiper.use([Autoplay])
let vm = null
export default {
  components: {
  },
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      icon: require('@/assets/main_images/icon_warn_02.png')
    }
  },
  activated() {
  // 看自己的需求，本项目点击slide之后需要跳转到详情，但是这个页面没有关闭，所以需要重新初始化，不然再回到这个页面，slide就不会自动滚动了
    this.init()
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      vm = this
      new Swiper('.swiper-container', {
        direction: 'vertical', // 垂直切换
        loop: true,
        allowTouchMove: false,
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,
        autoplay: {
          disableOnInteraction: false, // 触碰后不会停止自动切换
          delay: 3000,
          pauseOnMouseEnter: false // 鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换
        },
        slidesPerView: 'auto', // 能够同时显示的slides数量：'auto'则自动根据slides的高度来设定数量
        on: {
          click: function(swiper, event) { // 在此处实现相关业务逻辑
            const data = {
              code: swiper.clickedSlide.attributes['data-code'].value,
              path: swiper.clickedSlide.attributes['data-path'].value,
              title: swiper.clickedSlide.attributes['data-title'].value
            }
            vm.goto(data)
          }
        }
      })
    },
    goto(item) {
      const query = {
        code: item.code,
        title: item.title,
        psiType: 'warn'
      }
      this.$emit('goto', item.path, query)
    }
  }
}
</script>

<style lang="scss" scoped>
// @import 'swiper.css';
  .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>