我正在实现像twitter这样包含图片和文字的Feed屏幕。我正在使用角度4.目前我正在使用Virtual Scroll来改善用户滚动深度如100项时的性能。我的问题是在我的列表中所有项目都有可变大小,这个库不完全支持动态高度。喜欢需要一些最小固定高度。这会导致移动设备和某些浏览器出现闪烁现象。如果可能的话,我想用Angular实现React Js虚拟滚动。可以任何人建议我任何解决方案,以便我的饲料清单变得顺畅。
答案 0 :(得分:2)
由于ngx-ui-scroll支持所有必需的功能,例如可变高度内容。如果你真的想克服这个问题,我建议所有人都使用它。
答案 1 :(得分:2)
如果您不想使用第三方库并使用Google Material,请执行此操作(对于Angular 7.2):
import { ScrollingModule } from '@angular/cdk/scrolling';
import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling';
并将两者都放入模块的导入中。通过CSS在<cdk-virtual-scroll-viewport>
上设置高度(例如,如果要排除50 px的标题并填充屏幕,则可以为calc(100vh - 50px)
)和itemSize =“ 10”(或任何其他小数字,就是这样)。
然后在迭代项上设置[style.height]="'auto'"
。
请记住,某些功能将无法使用此功能,例如滚动到某个项目或无限滚动(因为可见项目的数量是由itemSize计算的,并且您不十分了解它,除非您开始测量每个项目并进行计算这个意思对我个人来说太骇客了