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

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天

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

- 第一种是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写法 版本同上

<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, //是否循环 true 是，false 否
	      direction: "vertical", // 竖向滚动
	      autoplay: {
	        delay: 1000,
	        // 当用户滑动图片后继续自动轮播
	        disableOnInteraction: false,
	      },
	      observer: true, // 修改swiper自己或子元素时，自动初始化swiper
	      observeParents: true, // 修改swiper的父元素时，初始化swiper
	    });
	}
}

swiper有很多版本问题的坑，多查资料避免！有问题麻烦指出，谢谢！