vue中使用swiper动态加载数据遇到的问题及解决方法

最近写了一个电商项目，有一个需求就是轮播商品之前写过一个类似的轮播版型，当时vue中引入swiper遇到了一些问题，所以安装了低版本的swiper，高版本的会有问题，直接贴下代码<div class="hotprow-1200-auto"><div class="Etitle mo">hot-sale product</div><div class="ti

王柃苏

7319人浏览 · 2021-08-11 17:57:55

王柃苏 · 2021-08-11 17:57:55 发布

最近写了一个电商项目，有一个需求就是轮播商品

之前写过一个类似的轮播版型，当时vue中引入swiper遇到了一些问题，所以安装了低版本的swiper，高版本的会有问题，直接贴下代码

<div class="hotpro  w-1200-auto">
                 <div class="Etitle mo">hot-sale product</div>
                 <div class="title mo">热销产品</div>
                   <div class="main-banner">
                     <div class="a">
                       <span class="prev">
                         <img src="../assets/images/hbl.png" alt="" />
                       </span>
                       <div id="box">
                         <div class="swiper-container swiper-one">
                           <div class="swiper-wrapper">
                             <div class="swiper-slide cursor" v-for="(item,index) in hpro"  @click="godetail(item)">
                               <img class="rxShow" src="../assets/images/rexiao.png" alt="">
                               <img :src="item.image" alt="" />
                               <div class="txt">
                                   <div class="name overflow">{{item.name}}</div>
                                   <div class="names overflow">{{item.code}}</div>
                                   <div class="money cursor f-justify-bet">
                                     <div class="left">¥{{item.price}}</div>
                                     <div class="right">
                                       <img src="../assets/images/hotgo.png" alt="">
                                     </div>
                                   </div>
                               </div>
                             </div>

                           </div>
                         </div>
                       </div>
                       <span class="next">
                         <img src="../assets/images/hbr.png" alt="" />
                       </span>
                     </div>
                   </div>
              </div>

swiper之前认为的简单好用，是因为用的都是本地数据，指哪渲哪，但是当换成动态数据时，问题就一个个都出来了，首先就是当我从后端拿回来的数据无法正常渲染，只能显示前6个，但当时后端返回了12调数据，所以造成了只能手动拖拉第二页的2/1，很奇怪，当时反复切换本地数据和动态数据，本地数据一点事没有，动态数据完全不行，查阅了度娘，添加了如下属性，当时就能正常渲染所有数据了

//启动动态检查器,当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
observer:true,

但是第二天，测试就告诉我它数据是重复的，就是反复渲染前四个，又是一番查阅，添加如下属性

observeParents:false,//修改swiper的父元素时，自动初始化swiper
onSlideChangeEnd: function(swiper){
//更新Swiper，这个方法包含了updateContainerSize，updateSlidesSize，updateProgress，updatePagination，updateClasses方法。也就是数据改变是重新初始化一次swiper；
  swiper.update();
//重新对需要循环的slide个数进行计算，当你改变了slidesPerView参数时需要用到，需要自动轮播的时候必须要加上；
  swiper.reLoop();
//重新开始自动切换；
  swiper.startAutoplay();
},

当时有很开心，因为又好了，但是后来又出现了问题，就是点击元素进入商品详情时又双叒叕出现了bug

然后又找找找，发现点击的确没反应，连获取当前点击元素的信息都log不出来了，后来发现应该是加载顺序的问题，之前我是在mounted里调用this.run()轮播方法

解决

this.$nextTick(function(){
  this.run()
})

在拿到动态数据后就执行swiper，可谓，，，

下面是轮播代码

run(){
  var swiper = new Swiper('.swiper-one', {
  loop: true,
  autoplay:5000,
  observer:true,
  observeParents:false,
  onSlideChangeEnd: function(swiper){
    swiper.update();
    swiper.startAutoplay();
    swiper.reLoop();
  },
 // autoplay: {// 自动滑动
 //     delay: 2000, //1秒切换一次
 //     disableOnInteraction: false,  //用户操作swiper之后,是否禁止 autoplay
 // },
 autoplayDisableOnInteraction : false,//手动滑动后自动轮播失效 解决移动端问题
 speed: 500,
 // 一行显示slider的个数
 slidesPerView: 4,
 // 定义slides的数量多少为一组
 slidesPerGroup: 4,
 // navigation: {
 //     nextEl: '.next',
 //     prevEl: '.prev',
 // },
 // 高版本
 nextButton: '.next',
 prevButton: '.prev',
   });
 },