男色经典
男色经典
  • 发布:2020-05-23 21:36
  • 更新:2020-05-24 00:29
  • 阅读:5464

swiper 卡顿的问题

分类:uni-app

问题描述:

本人使用swiper做了一个类似抖音的上下划动切屏效果,不过用的是图片,不是视频。
现在遇到了一个让人很郁闷的事情,用户刚打开APP的时候,划动会很卡,但是,用户已经看过的图片,加载过的,再次加载就不会卡了,很流畅。

问题是,我大概的理解是,swiper-item没有展示的时候,缓存没有加载,加载过一次之后,就流畅了,而这个加载动作是在翻页动画的时候进行的,所以导致了很卡。

我总不能和用户说,你先全部看一遍,然后就不卡了吧?

我做过各种尝试,包括把网络图片先缓存到本地,然后直接提前读取本地图片,还是卡,问题是一样一样的,没有展示过的,就是卡,已经展示过的,就是流畅。

也不是加载列表过多的问题,我做了列表清理,只要列表里超过20张图片,就自动清理掉已经看过的前10个图片,一次加载也只会加载10张,一张照片大概100K左右,我的手机是iphoneX,渲染完全无压力,所以不存在渲染照片过多的问题。

/* 关闭切换效果 */  
this.duration = 0;  
	this.$nextTick(() => {  
	this.dataList = [...this.dataList, ...data];  
	if (this.dataList.length > 20) {  
	        this.activeIndex -= 10;  
		this.dataList.splice(1, 10)  
	}  
	this.$nextTick(() => {  
		/* 恢复切换效果 */  
		this.duration = 100;  
	})  
	});

我认为,现在需要预先加载的根本不是图片,而是swiper-item组件!
可是,我把图片去掉,又很卡,似乎又是图片的问题,可是,为什么加载本地图片也会这么卡??为毛???为毛????我快疯了!!!!!!!!

请问有没有高手遇到过类似的问题?
请有解决办法的大佬给点提示,谢谢。

2020-05-23 21:36 负责人:无 分享
已邀请:
暮雪骄阳

暮雪骄阳

思路不对吧,这个跟图片是网络读取的还是本地提取的关系不大,应该是图片的渲染过程。你先这么做,整个页面里,使用纯净的swiper把容器写出来,再循环swiper-item数组,图片组件是images mode="widthFix",其他的一切对swiper的操作或事件脚本去掉,不监听滚动条

  • 2***@qq.com

    我实现思路和你想一模一样,证明,还是卡。我还是没图


    2021-06-06 20:53

春雷Le

春雷Le - 私信,接各种特效

不要对dataList的数据进行删除或新增
操作方式参考

this.dataList.length = 300  
this.dataList.fill({src:''})  
this.$set(this.dataList[0],'src','http://')

该问题目前已经被锁定, 无法添加新回复