swiper和vue-awesome-swiper竖向滚动，自适应高度解决方案

vue-awesome-swiper 版本：4.1.1
swiper版本：5.4.5
需求：项目中需要竖向滚动文字，只显示1条，但是每条数据内容不一样，所以高度不能写死，需要自适应高度，进行循环滚动
1.安装对应的版本
2.在需要的组件里引入使用
第一种是vue-awesome-swiper写法

// 这种是vue-awesome-swiper写法
<template>
	<swiper :options="swiperOption2">
	    <swiper-slide>
	      <p>
	        这是第一张图这是第一张图这是第一张图这是第一张图这是第一张图这是第一张图slider1slider1slider1slider1
	        这是第一张图这是第一张图这是第一张图这是第一张图这是第一张图这是第一张图slider1slider1slider1slider1
	      </p>
	    </swiper-slide>
	    <swiper-slide>
	      <p>
	        这是第二张图这是第二张图这是第二张图这是第二张图这是第二张图这是第二张图这是第二张图这是第二张图slider2
	      </p>
	    </swiper-slide>
	    <swiper-slide>
	      <p>
	        这是第三张图这是第三张图这是第三张图这是第三张图这是第三张图这是第三张图这是第三张图这是第三张图slider3
	      </p>
	    </swiper-slide>
  </swiper>
</template>
<script>
//记得引入css
import {
    
     Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
    
    
	components: {
    
    
	    Swiper,
	    SwiperSlide,
  	},
	data() {
    
    
	  return {
    
    
	      swiperOption2: {
    
    
	        direction: "vertical", // 竖向滚动
	        autoHeight: true, // 自适应高度
	        slidesPerView: "auto", // 记得这里写 auto 不要默认写1哦
	        observer: true, //修改swiper自己或子元素时，自动初始化swiper
	        observeParents: true, //修改swiper的父元素时，自动初始化swiper
	        loop: true,
	        autoplay: {
    
       // 自动轮播
	          delay: 2000,
	          disableOnInteraction: false,
	        },
	      },
	 }
}
</script>
<style>
.swiper-container {
    
    
  width: 800px;
  margin: 100px auto;
}

.swiper-wrapper {
    
    
  width: 100%;
}
.swiper-slide {
    
    
  width: 100%;
  background-color: skyblue;
}
</style>

observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true, //修改swiper的父元素时，自动初始化swiper
这两句记得写，不写的话 就不会自动滚动了

第二种是swiper写法

// 2.这种是swiper写法  版本同上
<template>
<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <p>
          这是第一张图这是第一张图这是第一张图这是第一张图这是第一张图这是第一张图slider1slider1slider1slider1
          这是第一张图这是第一张图这是第一张图这是第一张图这是第一张图这是第一张图slider1slider1slider1slider1
          这是第一张图这是第一张图这是第一张图这是第一张图这是第一张图这是第一张图slider1slider1slider1slider1
        </p>
      </div>
      <div class="swiper-slide">
        <p>
          这是第二张图这是第二张图这是第二张图这是第二张图这是第二张图这是第二张图这是第二张图这是第二张图slider2
        </p>
      </div>
      <div class="swiper-slide">
        <p>
          这是第三张图这是第三张图这是第三张图这是第三张图这是第三张图这是第三张图这是第三张图这是第三张图slider3
        </p>
      </div>
    </div>
</div>
</template>
import Swiper from "swiper";
import "swiper/css/swiper.css";
export defalut {
    
    
	mounted() {
    
    
		this.swiper = new Swiper(".swiper-container", {
    
    
	      autoHeight: true, // 高度自适应
	      slidesPerView: "auto",
	      loop: true,
	      direction: "vertical", // 竖向滚动
	      autoplay: {
    
    
	        delay: 1000,
	        // 当用户滑动图片后继续自动轮播
	        disableOnInteraction: false,
	      },
	      observer: true, // 修改swiper自己或子元素时，自动初始化swiper
	      observeParents: true, // 修改swiper的父元素时，初始化swiper
	    });
	}
}