Angular Virtual Scroll显示问题
Angular Virtual Scroll是Angular框架中的一个特性，用于优化大型列表的性能和用户体验。它通过仅渲染可见部分的列表项，而不是全部渲染，来减少DOM操作和内存占用。
Virtual Scroll的工作原理是根据可见区域的大小和滚动位置，动态地加载和卸载列表项。当用户滚动列表时，Virtual Scroll会根据滚动位置计算出应该显示的列表项，并且只渲染这些项。这种方式可以显著提高大型列表的渲染性能，特别是在移动设备上。
Virtual Scroll的优势包括：
- 性能优化：通过只渲染可见部分的列表项，减少了DOM操作和内存占用，提高了列表的渲染性能和响应速度。
- 用户体验：由于只渲染可见部分的列表项，用户可以更快地滚动和浏览列表，提供了更流畅的用户体验。
- 节省资源：Virtual Scroll可以减少浏览器的资源消耗，特别是在处理大型列表时，可以节省内存和CPU的使用。
Angular Virtual Scroll适用于需要展示大量数据的场景，例如社交媒体的消息列表、电子商务的产品列表、新闻网站的文章列表等。
腾讯云提供了一些相关的产品和服务，可以帮助开发者在使用Angular Virtual Scroll时获得更好的性能和稳定性：
- 腾讯云云服务器（CVM）：提供可靠的云服务器资源，用于部署和运行Angular应用程序。
- 腾讯云对象存储（COS）：提供高可用性和可扩展性的对象存储服务，用于存储和管理大型列表所需的数据。
- 腾讯云CDN加速：通过全球分布的加速节点，提供快速的内容传输和加速，加快Angular应用程序的加载速度。
- 腾讯云云数据库MySQL版（CDB）：提供可靠的关系型数据库服务，用于存储和管理Angular应用程序所需的数据。
- 腾讯云云监控（Cloud Monitor）：提供实时的监控和告警功能，帮助开发者及时发现和解决Angular Virtual Scroll的显示问题。
更多关于腾讯云相关产品和服务的详细信息，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
我们加载了许多垫卡，并认为最好添加虚拟滚动，但它立即将显示更改为行(显示所有垫卡堆叠在另一个下面)。我已经重写了几次这个部分，但都无济于事。<div fxLayout style="margin-top: 40px" class="row">
浏览 48提问于2021-03-30得票数 0
回答已采纳
1回答
具有缓冲功能的角度树网格
、、、
我正在使用angular 7，并寻找一个具有缓冲功能的树状网格插件，同时加载大量记录。这样我们只能加载记录的可见部分。向下滚动时，它会加载剩余的记录。这个特性在angular中有没有什么插件？
浏览 0提问于2020-01-10得票数 1
它需要大约4秒来显示该组件，我希望它立即显示。有什么办法可以做到这一点吗？我尝试过，但无法让组件更快地呈现。
浏览 0提问于2020-05-26得票数 0
我在一个NgbModal中显示这个组件： <div id="gallerypopup"> <lib-ngx-image-zoom id="zoomer"item.imageUrls[selectedIndex]" ></lib-ngx-image-zoom> <cdk-
浏览 66提问于2020-06-30得票数 0
_options = this.options;} 模板- <cdk-virtual-scroll-viewport itemSize="30" class="scroll-viewport"[value]="option" (click)="onRadioOptionClick(option)"
class="scroll-i
浏览 10提问于2019-09-25得票数 0
是否有可能使用带有cdk-virtual-scroll-viewport vith可变项大小的虚拟/无休止滚动？更新2,2019年7月
由于目前还没有解决方案，我认为解决这个问题的“足够好”的方法是加载固定数量的项，并在列表的底部添加一个按钮来加载更多的项，如下面的示例：。
浏览 3提问于2019-01-14得票数 18
1回答
我正在尝试使用虚拟滚动来显示Ionic 3中的图片列表。$exists: ƒ ()最后，pictureSize是125
你知道为什么不显示图片吗？
浏览 0提问于2017-09-23得票数 0
我正在使用Angular Material Virtual scroll，项目被正确加载到DOM中，但当滚动时，它会跳来跳去，并自动跳到末尾。<cdk-virtual-scroll-viewport #scrollViewport (scrolledIndexChange)="scrolled($event)" [itemSize]="ITEM_SIZE" class="my-virtual" >
<
浏览 133提问于2021-05-11得票数 0
回答已采纳
3回答
我有一个表显示了这么多行，我想优化它的性能。我通过使用虚拟卷轴技术找到了一个解决方案。下面是的一个示例，我发现了一个简单的div： <divclass="state">{{state.name}}</div>
<div class="capital"&
浏览 3提问于2018-06-05得票数 26
回答已采纳
我想使用CSS类.cdk-virtual-scroll-content-wrapper自定义一个，以便滚动容器始终显示滚动条。.cdk-virtual-scroll-content-wrapper {} 这个行为并不是特定于这个CSS属性的--例如，如果我设置了一个边框，也不会有任何效果为cdk-virtual-scroll-viewport或cdk-virtual-scroll<
浏览 71提问于2020-11-11得票数 1
<ul class="list"> <div *ngFor="let n of numbers" style="height:130px;">{{n}}</div>
</cdk-virtual-scroll<
浏览 0提问于2019-03-20得票数 7
[virtualScroll]="true">
const tableEl = fixture.debugElement.query(By.css('.p-datatable-virtual-scrollable-body
浏览 29提问于2021-02-19得票数 1
1回答
使用Angular CDK虚拟滚动来渲染巨大的列表有问题。需要将itemsize设置为1才能正确加载列表。 期望根据视口大小加载列表。但它的加载远远超过视口的大小。示例： <cdk-virtual-scroll-viewport [itemSize]="1" style="height: 100%"> <
浏览 129提问于2021-01-22得票数 0
1回答
我对angular非常陌生，已经被这个问题困扰了一天多了。使用Angular 7和angular/cdk 7.3.4版。我想要完成的事情似乎很简单。我有一个很好的旧HTML表，有很多行。我想在屏幕上显示它并启用虚拟滚动(使用cdk- virtual -scroll-viewport)。显示顶部的h1元素，但不显示表本身。它被完全忽略了。我错过了什么，here.Is这是做这件事的正确方法吗？感谢你的帮助： 这是我的组件标记：
浏览 16提问于2019-03-15得票数 5
回答已采纳
3回答
从API调用获得的JSON数组应该显示在使用ionic 5和Rxjs的卡片中。该接口每5秒调用一次，因此每次调用时数据都会发生变化。问题是，在每次调用时，整个卡片都将重新生成，并且在用户看来是骗人的。this.myService.getList()).subscribe(res => {}) 在html文件中，使用ion-virtual-scroll将数据显示在卡片上，如下所示： <ion-virtual<
浏览 33提问于2020-04-08得票数 0
回答已采纳
遵循正式文档实现虚拟视图，但在html组件中获得以下错误消息：'cdk-virtual-scroll-viewport' is not a known element:
1.If 'cdk-virtual-scroll-viewport' is an Angular component, then verify that it is part of this module.If 'cdk-virtual-scroll<
浏览 14提问于2022-02-24得票数 1
我正在使用cdk-virtual-scroll-viewport来应用虚拟滚动。不幸的是，在将样式应用于滚动条之后，滚动不再平滑。本机(右侧)滚动条正在闪烁，但移动起来更平滑。https://stackblitz.com/edit/angular-jkw9ac-dpnnaw ?
浏览 48提问于2020-07-09得票数 2
回答已采纳
我在我的应用程序中使用angular-material Autocomplete (版本7)。我在里面用的是<cdk-virtual-scroll-viewport>。除了我已经解决的许多问题之外，还有一个我不理解的问题： 当我添加最大高度css时，下拉菜单不显示，如果我添加高度，它将以固定高度显示。::ng-deep .cdk-virtual-scroll-orientation-vertical .cdk-vi
浏览 47提问于2019-04-05得票数 3
回答已采纳
} from '@angular/core';
import {MatInputModule} from '@angular/material';import {MatCardModule} from '@angular/mat
浏览 2提问于2019-07-03得票数 22
回答已采纳
在Angular中，让材料CDK滚动列表自动滚动到某个点是一项简单的任务。然而，我不明白的是，如何让两个或更多的列表自动滚动。只有HTML代码中的第一个列表执行自动滚动。我的HTML： <button (click)="onButtonClick()">Scroll to end</button>
<cdk-virtual-scroll-viewport>
<
浏览 29提问于2020-12-18得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
