Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

虚拟滚动存在性能问题,超过1000条数据会卡顿或者直接卡死 #153

Open
xianyusPadding opened this issue Aug 1, 2024 · 3 comments

Comments

@xianyusPadding
Copy link

编译平台
HbuilderX

VUE版本
vue3

运行平台
App

z-paging版本
2.7.11

问题描述

  1. 使用虚拟滚动
  2. cell是不定高度

数据量比较大时,会出现性能问题(超过1000条),页面直接卡顿,超过10s才能渲染出来,如果数据量超过10000条,可能就卡死了

希望解决性能问题,或者提供切片的操作,支持单次渲染几百条,分多次渲染

@xianyusPadding
Copy link
Author

image

demo这里的例子不太对,用的是异步渲染,每次只渲染一页数据是体现不了性能边界的。

queryList(pageNo, pageSize) {
  // 组件加载时会自动触发此方法,因此默认页面加载时会自动触发,无需手动调用
  // 这里的pageNo和pageSize会自动计算好,直接传给服务器即可
  // 模拟请求服务器获取分页数据,请替换成自己的网络请求
  // const params = {
  // 	pageNo: pageNo,
  // 	pageSize: pageSize,
  // 	random: this.tabIndex === 1
  // }
  
  // this.$request.queryListLong(params).then(res => {
  // 	// 将请求的结果数组传递给z-paging
  // 	console.log('res.data.list: ', res.data.list)
  // 	this.$refs.paging.complete(res.data.list);
  // }).catch(res => {
  // 	// 如果请求失败写this.$refs.paging.complete(false);
  // 	// 注意,每次都需要在catch中写这句话很麻烦,z-paging提供了方案可以全局统一处理
  // 	// 在底层的网络请求抛出异常时,写uni.$emit('z-paging-error-emit');即可
  // 	this.$refs.paging.complete(false);
  // })
  
  const list = new Array(1000).fill(0).map((item, index) => ({
  title: index + 1,
  detail: 'xxxxxxx'
  }))
  this.$refs.paging.complete(list);
}

改成这样就会卡顿了(一次性渲染1000条)

@SmileZXLee
Copy link
Owner

image 文档中已有详细说明

@xianyusPadding
Copy link
Author

都做本地分页了,那其实虚拟列表的意义就不大了...

希望zpaging的虚拟列表能解决大量数据时,仅渲染区域节点,并支持动态高度的情况下滚动到指定节点

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants