普歌-码上鸿鹄团队:Vue项目中使用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"><divclass="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">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"><divclass="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">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的子元素时，自动初始化swiperobserver: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共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！