angular6.x--虚拟滚动

Posted 2023-04-28

参考技术A

1.安装@angular/material、@angular/cdk
cnpm install --save @angular/material @angular/cdk

2.app.module.ts导入模块

3.在当前组件引入

html

css

1.Context Variables
使用*cdkVirtualFor，我们有一些上下文变量:index, count, first, last, even, odd.

2.视图回收
为了提高渲染性能， *cdkVirtualFor 会缓存那些曾经创建过但不再需要的视图。当要创建一个新视图时，会转而复用一个已缓存的视图。可以通过 templateCacheSize 属性来调整视图缓存的大小。把这个大小设置为 0 会禁用缓存。如果你的模板在内存方面很昂贵，你可能会希望减小这个数字，以免在模板缓存上花费太多内存。

3.固定超过滚动视图的item个数
minBufferPx maxBufferPx
当所有条目都是固定大小时，你可以使用 FixedSizeVirtualScrollStrategy。可以用 itemSize 指令轻松地将它添加到视口中。这种约束的优点是它可以提供更好的性能，因为在渲染条目时不需要进行测量。

固定大小的策略也支持设置一些缓冲区参数，用来决定渲染多少额外内容，也就是视口可见内容之外的部分。第一个参数是 minBufferPx。 minBufferPx 是视口必须渲染的最小内容缓冲区数量（以像素为单位）。如果视口检测到要缓冲的内容小于这个数量（未填满），就会立即渲染更多内容。 第二个参数是 maxBufferPx。它会告诉视口当检测到需要更多缓冲区的时候要渲染多少个备用缓冲区空间。

这两个缓冲区参数的作用可以用一个例子来说明。假设我们有以下参数：itemSize = 50、minBufferPx = 100、maxBufferPx = 250。当用户滚动浏览内容时，视口就会检测到只剩下 90px 的缓冲区。由于它小于 minBufferPx，所以视口必须渲染更多缓冲区。它必须渲染足够数量的缓冲区，直到其大于等于 maxBufferPx。在这种情况下，它渲染了4个条目（额外的 200px），使缓冲区总大小达到290px，略高于maxBufferPx 。

4.视口方向
虚拟滚动视口默认为垂直方向，也可以设置为 orientation="horizontal"。在改变方向时，要确保该条目是用 CSS 进行水平布局的。要做到这一点，你可能希望把 .cdk-virtual-scroll-content-wrapper 类作为 CSS 的目标，它是包含待渲染内容的包装元素。

5.数据
*cdkVirtualFor 接受来自 Array、Observable<Array> 或 DataSource 的数据。
数据源是一个抽象类，有两个方法：
– connect(): is called by the Viewport to receive a stream that emits the data array.
– disconnect(): will be invoked when the Viewport is destroyed.

例子：

6.trackBy
像 *ngFor 的 trackBy 一样，这里也可以指定 trackBy 函数，工作方式也都一样。传给这个 trackBy 的 index 是在数据源中的索引，而不是在要渲染的这部分数据中的索引。

用函数自己写排序功能：

7.滚动策略
为了确定整个内容的大小以及它在任何时刻需要实际渲染的内容，视口依赖于所提供的一个 VirtualScrollStrategy。提供它的最简单方式是在视口上使用 itemSize 指令（例如 <cdk-virtual-scroll-viewport itemSize="50">）。但是，也可以通过创建一个实现 VirtualScrollStrategy 接口的类来提供自定义策略，并在包含此视口的组件上把它提供为 VIRTUAL_SCROLL_STRATEGY。

CCVirtualGridList - Cocos Creator 虚拟列表

参考技术A

CCVirtualGridList是基于Cocos Creator ScrollView + Layout 编写的一个具有 虚拟布局特点 的滚动列表控制容器。支持平滑滚动显示大量数据对象，图片元素可以实现 异步按帧加载 ， 保证滚动平滑 。 具有滚动翻页功能 ， 自适应宽度显示多列 ， 单项选择 ， 局部更新 等实用功能。

Cocos Creator 引擎中提供了一个常规的滚动控制容器——ScrollView，实现基本滚动控制。但是缺少与之配合的List控件来实现虚拟布局功能，需要开发者手动扩展，在这里就提供一个实现虚拟布局功能的扩展列表控件，是参照Egret中的List控件的接口方式来实现。

虚拟布局的原理其实很简单，就是只加载和显示可视区域的列表内容，可视区域外的并没有实体控件被实例化。以滚动事件驱动，动态滚动并复用可视区域内的列表模板，切换数据显示，看上去像一个完整的列表在上下滚动，由于此种设计实例化控件少，所以内存占用极少，drawcall数量低而且稳定，所以现在被普遍应用。但是虚拟布局的核心不仅在于此，由于需要不停地切换显示内容，如何将素材转换的更快速，更平滑才是虚拟列表的关键。CCVirtualGridList在VirtualGridListBaseItem 中提供自己的加载图片的方法——loadImage，实现异步按帧加载，保证列表滚动流畅度，又能有效利用缓存。

使用控件非常简单，只需要拷贝demo项目中三个文件VirtualGridList.prefab，VirtualGridList.js，VirtualGridListBaseItem.js 到您的工程中Prefabs文件夹中即可。使用之前将VirtualGridList.prefab拖入画面中, 列表单元控制组件继承 VirtualGridListBaseItem 就可以。

启动参数可以在creator 图形化界面填入，但是为了不受预制体的维护影响，建议通过初 始化脚本接口传入启动参数。

首次创建显示列表， dataList为数据数组

追加显示列表， dataList为追加的数据数组，适用于滚动翻页

获取数据数组

获取显示对象列表

清空列表

根据数据对象查找对应的显示对象，当开启虚拟列表的时候，返回对象可能不存在

获取缓存图片

注册滚动至底部回调方法 当useVirtualList=false 时不可用

修改数据后，刷新列表显示，some代表指定刷新的对象, 不传则刷新全部。

判断是否滚动至顶部

滚动至顶部

滚动到固定位置 itemIndex代表滚动至指定显示对象的索引， sec为滚动动画时长

数据对象。来自要显示的数据列表中的一条，每一条显示单元控件，都对应一条数据对象，当useVirtualLayout= true 的时候，单元控件对应的data数据对象不固定，会滚动切换。

子类可覆盖方法，自定义显示方法，当滚动交替或初始化的时候触发。当useVirtualLayout= true 的时候，每一个显示单元控件都是滚动复用的，所以对应的Component组件也是复用的，所以不要在其内部记录与某一条数据对应的变量或属性。

获取现实对象在队列中的索引

子类可覆盖方法，点选触发事件，只支持单选

子类可覆盖方法，如果当前为选中状态，当其他单元被点选触发此事件

子类可覆盖方法，当控件滑动离开可视区的时候触发 当useVirtualList=false 时不可用

子类可覆盖方法，当控件滑动进入可视区的时候触发 当useVirtualList=false 时不可用

VirtualGridList 提供的异步加载图片, 自动缓存。pic: 图片地址， cb: 图片加载后的回调方法，thisObj: 回调方法this对象