vue中使用Swiper划不动现象解决方法

Swiper实例化

new Swiper(".home-banner",{
    loop:true,
    pagination:{
    el:".swiper-pagination"
  }
})

这时候会出现，划不动现象，产生的原因是本来这个地方是没有swiper-slide这个数据的，后续我们发送了ajax请求，他才会动态生成六个swiperslide，banners数据立马改变了，它内部会生成新的虚拟dom和上一次虚拟dom结构作对比，然后产生新的真实dom，这个过程需要时间，但是我们立马实例化了，所以等到真实dom渲染完成后实例化早就结束了。

解决方法就是我们必须要等到因为数据改变了引发新的真实dom渲染完成后才会执行的操作，就可以避免这样的问题

this.nextTick函数所以我们需要把实例化的过程写在this.nextTick函数所以我们需要把实例化的过程写在this.nextTick函数所以我们需要把实例化的过程写在this.nextTick的回调函数中，在这个函数里面进行的操作就是等到数据更新而引发的页面当中新的虚拟dom所渲染成的真实dom真正渲染出来之后才执行，简单来说就是等到页面全部渲染完成后，再进行实例化操作。

this.$nextTick(()=>{//在这个函数里面，因为数据改变导致页面生成新的真实dom，全部渲染完成了
    new Swiper(".home-banner",{
               loop:true,
               pagination:{
               el:".swiper-pagination"
      }
   })  
})