问答

vue-awesome-swiper 懒加载图片不更新问题

作者:admin 2021-06-07 我要评论

swiper-lazy 图片不更新问题 当数据发生变化是,所有信息都发生变化了唯独图片还是原来的; 网上查的资料是在img 加上一个 :key="图片地址"! 结果是图片是发生...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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)

但是

这么一来会出现一系列未知异常,首先已知的 左右翻页按钮失效。

image.png

不知道大家有没有遇到类似的问题、如何解决!

###

使用第二种办法解决了,前提是不能使用计算属性获取 swiper,这绝对是个坑,网上有很多资料都是这么写的,使用 了 v-if 后 计算属性就没法获取 ref了。
原来的代码
html

<swiper v-if="state" :auto-update="true" class="actor-list" :options="swiperOption" ref="Swiper">
  computed: {
     //计算属性
     swiper() {
      return this.$refs.Swiper.swiper;
    }
  },

搬迁到updated生命周期重新初始化就ok了

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue-awesome-swiper 懒加载图片不更新

    vue-awesome-swiper 懒加载图片不更新

  • 请问next.js在getStaticProps里怎样获

    请问next.js在getStaticProps里怎样获

  • uniapp插槽渲染节点错误

    uniapp插槽渲染节点错误

  • Leader 要求将现有 MySQL 中的一个表以

    Leader 要求将现有 MySQL 中的一个表以

腾讯云代理商
海外云服务器