关于swiper插件首次加载失效

当初自己做项目时由于轮播图数据需要请求接口返回页面渲染，通常会讲数据集中存放在vuex中进行状态管理， 但由于swiper插件需要new轮播图实例，导致此同步操作先请求一步执行，使得轮播图数据没有请求回来时就先进行渲染，导致轮播图功能失效

解决办法：

  this.$nextTick(
        ()=>{
          var mySwiper = new Swiper ('.swiper', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  }) 
        }
      )

将swiper插件实例放在nextick中就可以解决这个小问题