swiper初始化,图片不轮播

swiper初始化,图片不轮播

原因:swiper的初始化在数据加载完成之前,异步了

解决方法:

  • 在数据调用结束后再进行swiper初始化。实现原理是通过vue自带的nextTick方法,它会在数据变化之后,DOM更新以后进行回调函数,在把轮播图放在回调函数里
  • 在swiper初始化的时候加上两个属性(observer:true、observeParents:true)。实现原理是如果不是轮播图的情况下,直接在初始化时加上observer(修改swiper自己或子元素时,自动初始化swiper)、observeParents(修改swiper的父元素时,自动初始化swiper)这两个参数就行了,会在数据变化时,再进行初始化
  • 在加载组件时用v-if判断,实现原理是通过双向数据绑定,给他绑定一个空数组,判断这个数组有length时渲染

你可能感兴趣的:(swiper初始化,图片不轮播)