vue 中使用swiper 开启virtual虚拟Slide渲染不及时问题?

FlexUI
  • 123

swiper版本:"swiper": "^4.5.1"

vue项目使用swiper插件做类似月抖音的无限列表效果,默认的方式在浏览器上滑加载达到一定的数量后 会出现异常的卡顿。

后来使用 virtual虚拟Slide 解决了这个性能问题,滑动起来非常流畅,无论加载多少个都不会出现卡顿问题。

但是 从而带来另外一个 非常棘手的问题,就是 virtual虚拟Slide渲染不及,在滑动到第二个Slide时 会显示第一个Slide,过一会才消失

如下图:
image.png

大概在500毫秒应有的图片才显示

image.png

测试使用图片区别不是很大,如果使用视频的话,会残留上一个视频的画面。

我尝试过 实时
virtual 的 this.virtual.update();
vue 的 this.$forceUpdate()
但是没有什么效果。

网上关于virtual的资料非常少,不知道是否能解决这个 渲染不及时的问题,大佬们帮忙看看有什么解决方案!!

swiper 中文网资料https://www.swiper.com.cn/api/virtual/374.html
英文网:https://swiperjs.com/api/#virtual

回复
阅读 2.8k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏