Nuxt3/Vue3中Swiperjs轮播仅页面重载后自动播放问题排查

问题根源 #

你的Swiper组件初始化时，父组件通过useAsyncData异步获取的werkBilder数据还未加载完成，此时Swiper没有可渲染的slide，Autoplay模块无法正常启动。当后续数据加载完成、slide渲染出来后，Swiper不会自动触发Autoplay的启动逻辑；只有页面重载时，数据已缓存或提前加载完成，Swiper初始化时已有可用slide，Autoplay才能正常工作。

关于提前加载Swiper #

不需要提前加载Swiper，问题核心并非Swiper的加载时机，而是Swiper初始化时机与数据加载时机不匹配。

解决办法 #

办法1：延迟初始化Swiper，确保有数据后再渲染 #

在子组件的<swiper>标签上添加v-if，仅当werkBilder存在且包含内容时才初始化Swiper：

<template>
  <swiper
    v-if="werkBilder && werkBilder.length > 0"
    :autoplay="{
      delay: 5000,
      disableOnInteraction: false,
    }"
    :spaceBetween="30"
    navigation
    :modules="modules"
    class="mySwiper"
    :style="{ position: 'unset' }"
  >
    <swiper-slide v-for="(item, i) in werkBilder" :key="`slice-item-${i}`">
      <prismic-image :field="item.bild" />
    </swiper-slide>
  </swiper>
</template>

办法2：监听数据变化，手动启动Autoplay #

通过ref获取Swiper实例，监听werkBilder的变化，当数据加载完成后手动触发自动播放：
修改子组件的script部分：

<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "swiper/css/autoplay";
import { Navigation, Pagination, Autoplay } from "swiper";
import { ref, watch, nextTick } from 'vue';

export default {
  props: ["werkBilder"],
  components: {
    Swiper,
    SwiperSlide,
  },
  setup(props) {
    const swiperInstance = ref(null);
    const modules = [Pagination, Navigation, Autoplay];

    watch(() => props.werkBilder, (newVal) => {
      if (newVal && newVal.length > 0 && swiperInstance.value) {
        // 等待slide渲染完成后启动自动播放
        nextTick(() => {
          swiperInstance.value.autoplay.start();
        });
      }
    }, { deep: true });

    return {
      modules,
      swiperInstance
    };
  },
};
</script>

然后在template的swiper标签上绑定ref：

<swiper
  ref="swiperInstance"
  :autoplay="{
    delay: 5000,
    disableOnInteraction: false,
  }"
  :spaceBetween="30"
  navigation
  :modules="modules"
  class="mySwiper"
  :style="{ position: 'unset' }"
>
<!-- 原有slide内容保持不变 -->
</swiper>

内容的提问来源于stack exchange，提问作者Lisa