vue3切换页面路由再返回swiper失效

最新推荐文章于 2023-09-28 14:45:52 发布

麻瓜呀

最新推荐文章于 2023-09-28 14:45:52 发布

阅读量340

点赞数 1

文章标签： javascript vue.js swiper vue3

本文链接：https://blog.csdn.net/qq_41421033/article/details/129955683

版权

在Vue3项目中，当使用swiper插件创建轮播图时，如果在进入页面后切换路由再返回，轮播图会停止工作，停留在第一张图片且指示点异常。为了解决这个问题，可以在`onMounted`生命周期钩子中添加一个定时器来初始化swiper，确保组件完全渲染后再创建swiper实例。在设置完swiper后，别忘了清除定时器，以防止内存泄漏。

摘要由CSDN通过智能技术生成

vue3切换页面路由再返回swiper失效

问题描述：在vue3项目使用swiper插件时，进入页面swiper轮播图能正常运行，但是在切换了页面再返回有轮播的页面，轮播图就停留在第一张，并且轮播进度指示点只有一个。

出现问题的代码

<div class="swiper-container swiper">
   <div class="swiper-wrapper">
      <div class="swiper-slide main-list list-01" :style="backgroundDiv0">
         <img v-if="!isLoading" class="list-01-img" src="" alt="">
      </div>
      <div class="swiper-slide main-list list-02" :style="backgroundDiv4"></div>
   </div>
   <div class="swiper-pagination"></div>
</div>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
  setup() {
    mySwiper = new Swiper(".swiper-container", {
      watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        loopedSlides: 14,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true
        }
     })
  }
})
</script>

问题解决

给swiper的方法加上定时器，在onMounted中执行

<script lang="ts">
import { defineComponent} from 'vue'

export default defineComponent({
  setup() {
    let mySwiper = null
    const initSlider = async () => {
      await nextTick()
      const timer = setTimeout(()=> {
        mySwiper = new Swiper(".swiper-container", {
          watchSlidesProgress: true,
          slidesPerView: 'auto',
          centeredSlides: true,
          loop: true,
          loopedSlides: 14,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true
          }
        });
        clearTimeout(timer) // 清除定时器
      }, 400)
    }
    onMounted( () => {
      initSlider()
    })
    return {
    }
  }
})
</script>