swiper初始化,图片不轮播

swiper初始化,图片不轮播

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

解决方法:

  • 在数据调用结束后再进行swiper初始化。实现原理是通过vue自带的nextTick方法,它会在数据变化之后,DOM更新以后进行回调函数,在把轮播图放在回调函数里
  • 在swiper初始化的时候加上两个属性(observer:true、observeParents:true)。实现原理是如果不是轮播图的情况下,直接在初始化时加上observer(修改swiper自己或子元素时,自动初始化swiper)、observeParents(修改swiper的父元素时,自动初始化swiper)这两个参数就行了,会在数据变化时,再进行初始化
  • 在加载组件时用v-if判断,实现原理是通过双向数据绑定,给他绑定一个空数组,判断这个数组有length时渲染
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容