当vue遇到swiper

咱们这里的解决方案主要是针对动态获取数据的状况，若是您是静态页面就很好解决了，百度走起便可
你是否是有这样的困惑：vue环境下使用swiper出现各类问题，举个栗子：

• swiper实例化后图片资源压根不加载
• 加载了可是没有轮播效果
• 偶尔须要横竖屏切换一下才能够动起来（移动端）...

首先咱们看看swiper的实例化原理：
1.找到父级container包裹层
2.给这个父级的尾部逐个添加子元素
3.不要多此一举，除了父级元素你能够龟腚（规定）大小以及位置，内部子元素不要乱加定位
4.获得元素后，进行补帧，造成循环轮播效果
5.至于动画，其swiper.css作了大量的transform变形以及动画

接下来咱们说说vue的数据获取：
如今vue已经更新了，较多的使用axios进行交互，固然你能够接续使用vue-resource(官方再也不更新)，无论你的数据库使用的是mysql仍是mongodb，咱们读取数据时都有必定的时间，因此获取数据都是异步的，说的白一些就是你前台的页面渲染和个人数据获取不是同步的，你作你的我干个人，这就致使一个顺序问题，究竟是vue的数据获取在先，仍是我swiper实例化在先，咱们想要的确定是数据加载完毕，再开始实例化。

其实说到这里，比较来气，网上好多“程序员”拿vue的钩子函数（生命周期）说这个问题，其实无论你用created仍是mounted,都不是解决这个问题的关键所在，其关键点在于异步加载和dom的更新。

具体解决方案：
无论你是在created阶段仍是mounted阶段均可以实现最终效果，代码以下

    export default {
       data() {
          return {
            banner:[]
          }
        },
       methods: {
         _initBanner() {
             let swiperContainer = this.$refs.swiper;
             let swiperComp = new Swiper(swiperContainer, { //实例化一个cube轮播
                 autoplay: 2000,
                 autoplayDisableOnInteraction : false,
                 loop:true,
                 effect: 'cube',
                 cube: {
                     shadow: true,
                     slideShadows: true,
                     shadowOffset:18,
                     shadowScale:0.88
                 }
             })
         } 
       },
       created() {  //本例中你能够改成mounted
           this.$http.get('/api/getbanner').then((res)=>{
            this.banner = res.data;
           //console.log(this.banner);
              this.$nextTick(() => {   //修改数据以后当即使用这个方法，获取更新后的 DOM
              this._initBanner()
            })
          })

       }
    }

记得在获取数据后实例化swiper组件，而且添加nextTick方法，获取dom的更新状态。