vue中使用swiper出现loop和autoplay失效问题

最新推荐文章于 2024-09-26 14:45:50 发布

转载最新推荐文章于 2024-09-26 14:45:50 发布 · 3.7k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mmh1430702240/p/10918859.html

文章标签：

#javascript #ViewUI

在Vue项目中使用Swiper组件时遇到loop和autoplay功能失效的bug。问题出在创建Swiper实例的时机，通过在代码中添加setTimeout可以解决这个问题，确保在DOM加载完成后初始化Swiper。

部署运行你感兴趣的模型镜像

在vue中使用了swiper，结果出现了一系列的bug，在代码中修改能够使swiper中的属性正常运行，但是只要一刷新页面，swiper所有的属性就都不好使了。
究其原因，发现原来是在 new Swiper 的时候出了问题，简单的加一个setTimeout就好啦！话不多说，上代码：

<template>

<div v-if="bannerList.length">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in bannerList" :key="index">
        <a :href="item.banner_url">
          <img :src="item.banner_img" style="width: 100%;"/>
        </a>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
    <div class="swiper-button-next swiper-button-white"></div>
  </div>
</div>

</template>
mounted() {
      this.$nextTick(() => {
        this.initSwiper()
      })
    },
    methods: {
      initSwiper () {
        setTimeout(()=>{
          this.mySwiper=new Swiper('.swiper-container', {
            loopAdditionalSlides: 3,
            loop: true,
            speed: 2000,
            autoplay: {// 自动滑动
              delay: 1000, //1秒切换一次
              disableOnInteraction: false
            },
            pagination: {// 如果需要分页器
              el: '.swiper-pagination',
              clickable: true,
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            observer: true, // 启动动态检查器(OB/观众/观看者)
            observeParents: true // 修改swiper的父元素时，自动初始化swiper
          });
        },300)
      }
    },