面试题之Swiper问题

面试中会经常性的问到一些关于插件的场景题，那么接下来给大家讨论一个关于swiper获取数据，css都正常，但是图片不动的问题导致问题的原因
swiper提前初始化了而这个时候数据还没有完全出来

解决方法一
从swiper入手

ajax() // 这里是ajax，异步请求完成以后我们在new swiper
let mySwiper = new Swiper('.swiper-container', {
    autoplay: true,
    loop: true,
    observer: true, // 当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
    observerParents: true // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
  })

解决方案二
从Vue入手
在Vue中有一个方法nextTick()，用来解决DOM的先后执行问题，代码如下

ajax() // 这里是ajax，异步请求完成以后我们在new swiper
this.$nextTick(() => {
  let mySwiper = new Swiper('.swiper-container', {
    autoplay: true,
    loop: true
  })
})