黑马程序员技术交流社区

标题: 【上海校区】面试题之Swiper问题 [打印本页]

---

作者: 爱编码的J    时间: 2020-3-26 12:08
标题: 【上海校区】面试题之Swiper问题
面试中会经常性的问到一些关于插件的场景题，那么接下来给大家讨论一个关于swiper获取数据，css都正常，但是图片不动的问题导致问题的原因
swiper提前初始化了而这个时候数据还没有完全出来

解决方法一
从swiper入手

[JavaScript] 纯文本查看 复制代码

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的先后执行问题，代码如下

[JavaScript] 纯文本查看 复制代码

ajax() // 这里是ajax，异步请求完成以后我们在new swiper

this.$nextTick(() => {

  let mySwiper = new Swiper('.swiper-container', {

    autoplay: true,

    loop: true

  })

})

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2