Vue2项目中使用Swiper5出现BUG

前言:我们再开发项目时，难免会用到一些炫酷的轮播图，目前提供较好功能并且多端兼容的就有Swiper，版本目前是4-6，常用的是swiper5，swiper是刚刚出来的最新版本(附上Swiper官网），我这里是使用5版本遇到的动态数据后不轮播的bug

1. 去Swiper找到自己想要的配置项

• 根据自己项目需求找配置项
  

2. 这是我需要的swiper配置(修改bug之前)

• 提前下载npm install swiper
• data中的bannerurl是要提前从后端获取数据

<template>
   <div class="swiper-container banner_container">
        <div class="swiper-wrapper">
       
          <div
            class="swiper-slide swiper-no-swiping"
            v-for="bannerurl in pgBanner"
            :key="bannerurl.bannerUrl"
            :style="{'background-image': 'url(' + bannerurl.bannerUrl + ')'}"
          ></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <div class="banner_content">
          <h3 class="banner_tit">
            携手
            <br />生活与学习
          </h3>
          <p class="banner_txt">营造趣味学习生态</p>
          <nuxt-link to="/member">
            <i class="iconfont icon">&#xe657;</i>
          </nuxt-link>
        </div>
   </div>
</template>
<script>
import Swiper from "swiper";
export default {
  data() {
    return {
      //动态获取轮播图的数据源
      bannerurl:""
    };
  },
    created() {
    this.initSwiperBan();
  },
  methods: {
  //初始化swiper组件
    initSwiperBan() {
      var mySwiper = new Swiper(".banner_container", {
        //切换效果
        effect: "fade",
        //禁止滑动
        noSwiping: true,
        autoplay: {
          delay: 3000,
          //用户操作后是否被禁掉
          disableOnInteraction: false
        },
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          bulletClass: "my-bullet", //需设置.my-bullet样式
          bulletActiveClass: "my-bullet-active"
        }
      });
    },
}
}
</script>

• 到这里将会出现一个bug，就是轮播图不轮播了

3. 修改之后

• 我们得在加一个observer属性，动态检查器
  

<template>
   <div class="swiper-container banner_container">
        <div class="swiper-wrapper">
       
          <div
            class="swiper-slide swiper-no-swiping"
            v-for="bannerurl in pgBanner"
            :key="bannerurl.bannerUrl"
            :style="{'background-image': 'url(' + bannerurl.bannerUrl + ')'}"
          ></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <div class="banner_content">
          <h3 class="banner_tit">
            携手
            <br />生活与学习
          </h3>
          <p class="banner_txt">营造趣味学习生态</p>
          <nuxt-link to="/member">
            <i class="iconfont icon">&#xe657;</i>
          </nuxt-link>
        </div>
   </div>
</template>
<script>
import Swiper from "swiper";
export default {
  data() {
    return {
      //动态获取轮播图的数据源
      bannerurl:""
    };
  },
    created() {
    this.initSwiperBan();
  },
  methods: {
  //初始化swiper组件
    initSwiperBan() {
    var mySwiper = new Swiper(".banner_container", {
        //切换效果
        effect: "fade",
        //禁止滑动
        noSwiping: true,
       //启动动态检查器,当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
        observer:true,
        autoplay: {
          delay: 3000,
          //用户操作后是否被禁掉
          disableOnInteraction: false
        },
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          bulletClass: "my-bullet", //需设置.my-bullet样式
          bulletActiveClass: "my-bullet-active"
        }
      });
    },
}
}
</script>

到这已经结束了~感谢三连

更多推荐：wantLG的《普歌-码上鸿鹄:Vue错误[Vue warn]: Invalid prop: type check failed for prop “data”. Expected Array, got String》

• 作者：wantLG
• 本文源自：wantLG的《普歌-码上鸿鹄团队:vue中使用swiper动态遍历数据时出现不轮播的情况》
• 本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。