vue3 swiper11 动态数据时 轮播有时候不切换问题

如果你也喜欢用最新的技术，那么这篇文章也许适合你。

网上大部分使用swiper的版本都比较旧，不过还是有一定参考价值。根据个人的摸索下，总结出轮播不切换时使用的方法。

这里使用的是swiper11.

"swiper": "^11.1.3",

关键代码这里面一句话都不能少！

      nextTick(() => {
          swiperRef.value.update()
          swiperRef.value.autoplay.start()
      })

1. swiperRef.value.update()方法不加的话，可能会轮播混乱，比如现在轮播顺序1-2-3，现在少了3，按道理应该轮播1-2，它却轮播2-3。同时这个方法比较万能相当于n个方法，可以看官网文档。
2. swiperRef.value.autoplay.start()这里需要先autoplay才能使用这个方法，这个和以往的版本很大不同，然后一定要start()方法启动轮播，不然它会不动，虽然你看网页元素有渲染了
3. Vue的nextTick也是一定要使用的不然它在下次渲染之前是不会生效的

这里稍微提下
swiper.slideNext方法虽然能和swiperRef.value.autoplay.start()起到同样的效果，不过第一次会跳过一页就比较不友好。

下面是完整代码，仅供参考

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useIntervalFn } from '@vueuse/core'


// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
// import Swiper core and required modules
import { Autoplay } from 'swiper/modules'
// Import Swiper styles
import 'swiper/css'

import { createAlova } from 'alova'
import GlobalFetch from 'alova/GlobalFetch'

const { VITE_PUBLIC_PATH } = import.meta.env

const modules = ref([Autoplay])

const config = reactive({
  speed: 5000,
  jjWebsite: []
})

const swiperRef = ref()

const onSwiper = (swiper) => {
  // console.log(swiper)
  swiperRef.value = swiper
}
const onSlideChange = (swiper) => {
  // console.log('slide change')
}

const alovaInstance = createAlova({
  requestAdapter: GlobalFetch(),
  localCache: null
})
function loadConfig() {
  alovaInstance
    .Get(`${VITE_PUBLIC_PATH}config.json`)
    .then((response: Response) => response.clone().json())
    .then((data) => {
      let isChange = false
      if (config.speed !== data['speed']) {
        config.speed = data['speed']
        isChange = true
      }
      if (config.jjWebsite.length !== data['jjWebsite'].length) {
        config.jjWebsite = data['jjWebsite']
        isChange = true
      }
      for (let i = 0; i < data['jjWebsite'].length; i++) {
        if (config.jjWebsite[i] !== data['jjWebsite'][i]) {
          config.jjWebsite[i] = data['jjWebsite'][i]
          isChange = true
        }
      }

      nextTick(() => {
        if (isChange) {
          swiperRef.value.update()
          swiperRef.value.autoplay.start()
        }
      })
    })
}

onMounted(async () => {
  await loadConfig()
  useIntervalFn(() => {
    loadConfig()
  }, 60 * 1000)
})
</script>
<template>
  <swiper
    :modules="modules"
    slides-per-view="auto"
    :space-between="0"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    :autoplay="{
      delay: config.speed
    }"
  >
    <swiper-slide v-for="index in config.jjWebsite.length" :key="index">
      <iframe
        :src="config.jjWebsite[index - 1]"
        style="width: 100vw; height: 100vh; overflow: hidden"
        :id="`iframe` + index"
      />
    </swiper-slide>
  </swiper>
</template>
<style lang="scss" scoped>
.swiper {
  width: 100vw;
  height: 100vh;
  display: block;
  iframe {
    border: 0px;
  }
}
</style>