vue-awesome-swiper 懒加载图片不更新问题
swiper-lazy 图片不更新问题
当数据发生变化是,所有信息都发生变化了唯独图片还是原来的;
网上查的资料是在img 加上一个 :key="图片地址"!
结果是图片是发生变化了,但是不会加载,直接白屏给你,需要左右滑动一下才能加载出来。。。。。
<img :data-src="vo.pic" :key="vo.pic" class="swiper-lazy actor-img" />
我自己尝试的解决方法二:
在 整个swiper组件中 使用v-if 渲染,数据更新后 跟个 this.state = false
几秒后在this.state = true
,图片更新和加载问题解决了!
this.state = false;
setTimeout(()=>{
this.state = true
},100)
但是
这么一来会出现一系列未知异常,首先已知的 左右翻页按钮失效。
不知道大家有没有遇到类似的问题、如何解决!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
使用第二种办法解决了,前提是不能使用计算属性获取
swiper
,这绝对是个坑,网上有很多资料都是这么写的,使用 了 v-if 后 计算属性就没法获取ref
了。原来的代码
html
搬迁到
updated
生命周期重新初始化就ok了