Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
b3a209dd
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
5995
Star
90
Fork
162
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
b3a209dd
编写于
3月 30, 2024
作者:
DCloud_Heavensoft
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update README.md
上级
3f738ad9
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
22 addition
and
3 deletion
+22
-3
pages/template/custom-long-list/README.md
pages/template/custom-long-list/README.md
+22
-3
未找到文件。
pages/template/custom-long-list/README.md
浏览文件 @
b3a209dd
## uni-recycle-view
【TODO 名称待定,由于使用uni-开头应避免和内置组件冲突,比如uni-list和list组件是冲突的】
## uni-recycle-view
::: tip 组件名:uni-recycle-view
> 代码块: `uRecycleView`、`uRecycleItem`
...
...
@@ -6,7 +6,26 @@
[
点击下载&安装
](
)
:::
uni-recycle-view 组件用于在展示超长列表时优化内存占用以及初次加载时的速度。不同于uni-app list-view组件,uni-recycle-view组件不会对所有数据循环创建VNode。适用于仅使用一个for循环创建所有列表项的场景。uni-recycle-view组件内部通过计算决定哪些数据需要在界面展示,默认展示当前滚动位置的所在屏及上下各5屏的数据。由于上述计算会在滚动过程中进行,因此滚动过程中的性能不如list组件。
uni-recycle-view 组件是一个开源的、适用于展示超长列表的组件,它有2个优势:
-
更快的初始化速度
-
更低的内存占用
### 背景
uni-app x 的 list-view组件,在ui层面基于原生的recycle-view封装,对于长列表的渲染资源可以复用。
但在vue环境下,装载长列表会对列表所有数据都创建VNode,不管渲染层这些列表是否显示。创建大量VNode会影响初始化速度和内存占用。
uni-recycle-view 组件只创建了有限的VNode,循环复用这些VNode。uni-recycle-view组件内部通过计算决定哪些数据需要在界面展示,默认展示当前滚动位置的所在屏及上下各5屏的数据。
同时它也有一些限制和注意事项:
1.
uni-recycle-view 组件适用于仅使用一个for循环创建所有列表项的场景。
2.
由于滚动过程中会计算哪些数据需要渲染,因此滚动流畅度略低于list-view组件。
所以uni-recycle-view 组件是对list-view组件的一个补充方案。如果list-view的初始化速度和内存占用满足你的需求,那么继续使用list-view即可。
一般联网的分页加载列表,仍然可以使用list-view。uni-recycle-view 组件常见的场景是本地一次性遍历了大量数据并需要立即渲染在界面上。
在hello uni-app x的模板->自定义虚拟长列表示例中可以看到演示。
### 基本用法
...
...
@@ -37,7 +56,7 @@ uni-recycle-view 组件用于在展示超长列表时优化内存占用以及初
}
},
created
()
{
for
(
let
i
=
0
;
i
<
2000
;
i
++
)
{
for
(
let
i
=
0
;
i
<
2000
;
i
++
)
{
//这里模拟了一个2000条的本地数据
this
.
list
.
push
({
id
:
i
,
name
:
`Wifi_`
+
i
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录