vue Swiper 竖向轮播 纵向轮播

页面：

<div v-if="nav3On == 3">  
  <div class="swiper-container" id="swiper7">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in partylist" :key="index">
        {{ item.title }}
      </div>
    </div>
  </div>
</div>

注：使用 Swiper 时，需确保 Swiper 容器的 display 属性不为 none ，同样 visibility 属性不为 hidden。

v-if 和 v-show 会影响 Swiper 的效果：

v-show :通过 CSS 的 display 属性来控制元素的显示和隐藏。当 v-show 的条件为 false 时，元素依然存在于 DOM 中，只是被设置为 display: none。

v-if :根据条件添加或移除元素。当 v-if 的条件为 false时，元素会从 DOM 中完全移除； v-if 的条件为 true 时，元素才会被添加到 DOM 中。因此需确保 Swiper 初始化是在元素渲染之后进行。

watch: {
  // 使用 v-if 或 v-show 时，确保Swiper初始化是在元素渲染之后进行，即v-show/if条件为true
  nav3On(newVal) {
    if (newVal === 3) {
      this.$nextTick(() => {
        this.swiper7start();
      });
    }
  }
},

mounted() {
  // 使用 v-show 时，确保 Swiper 初始化在元素已经显示后执行，即 v-show 条件为 true
  this.$nextTick(() => {
    if (this.nav3On === 3) {
      this.swiper7start();
    }
  });
},

方法：

methods: {
  swiper7start(){
    new Swiper("#swiper7", {
      direction: "vertical",  // 竖向轮播
      speed: 1000,
      loopAdditionalSlides: 2, // 使得循环时平滑过渡
      autoplay: {
      delay: 0, // 自动播放间隔时间为0，实现连续播放
        disableOnInteraction: false, // 用户交互后不停止自动播放
      },
      loop: true,
      slidesPerView: 9, // 一次播几个
      spaceBetween: 0,  // 轮播内容之间的间距
      slidesPerGroup: 1, // 每次切换一个滑块
      observer: true,
      observeParents: true,
      observeSlideChildren: true,
    });
  }
}

样式：

.swiper7 {
  height: 100%
}
.swiper7 .swiper-slide{
  height: 40px;
}

效果：