移动端VUE中使用swiper动态渲染滑动功能失效以及swiper-slide间隙消失等一系列的问题解决。

     问题： 静态的数据渲染都没有问题但是用v-for动态渲染数据的时候就出现了缝隙及其左右滑动都失效了。在静态数据渲染出来的时候却不会

      思路：一开始我在想是不是css被我污染了 结果试了好多次都是静态渲染没问题而v-for动态渲染就出现不能滑动及元素间隙消失 ，经过了10多分钟的排查发现问题所在。   

   解决方法和错误地方：

        问题是：我的swiper初始化是在生命周期钩子的mounted中初始化的这样是错误的，因为mounted实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内，如果这时候初始化的话节点渲染而swiper的css和js文件来不及加载所以导致滑动不了及其出些一些列问题，

错误示例：

mounted() {
    new Swiper('.swiper-container-rec', {
      pagination: '.swiper-pagination',
      slidesPerView: 'auto',
      spaceBetween: 20,
 
    });
  },

      解决方法：把swiper初始化封装成一个函数在声明周期钩子updated中调用初始化函数因为updayed是组件 DOM 已经更新，可以执行依赖于 DOM 的操作 里面再用.$nextTick( ) 调用原因是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它  所以swiper的css和js文件也加载进来了 也就解决了。

        函数：

 methods: {
    getswiper(){
      new Swiper('.swiper-container-rec', {
        pagination: '.swiper-pagination',
        slidesPerView: 'auto',
        centeredSlides: false,
        paginationClickable: false,
        spaceBetween: 20,
        touchAction: 'none',
      });
    },
  },

        调用：

updated() {
    this.$nextTick(()=>{
      this.getswiper()
    })
  },

缝隙出来了也能滑动以及刷新只出现单个元素的问题也解决了