gpt4 book ai didi

angular - ionic 滚动到带有虚拟滚动的项目

转载 作者:太空狗 更新时间:2023-10-29 18:23:30 25 4
gpt4 key购买 nike

我有一个大数据列表。
为了使滚动不滞后,我使用了 Virtual Scroll,如下所示:

<ion-list [virtualScroll]="sections">
<div *virtualItem="let section" class="section" [attr.id]="section.chapterNum">
<h4 *ngIf="section.Chapter !=''">{{section.Chapter}}</h4>
<h5 [ngClass]="section.Section_Title">{{section.Section_Title}}</h5>
<div [innerHTML]="section.Section_Body | sanitizeHtml"></div>
</div>
</ion-list>

我还需要跳转到列表的特定部分,我是这样做的(在应用虚拟滚动之前):

GoToSection(chapter: number, section: string) {
this.menuCtrl.close();
var el = document.getElementsByClassName(section);
let yOffset;
for (var i = 0; i < el.length; i++) {
if (+el[i].parentElement.id == chapter) {
yOffset = (el[i] as HTMLElement).offsetTop;
}
}
setTimeout(() => {
this.content.scrollTo(0, yOffset, 0)
}, 300);
}

但是,当我尝试使用这个方法时,它显示一个空白屏幕,因为它还没有渲染滚动的元素并且找不到它。
使用 Virtual Scroll 滚动到元素有不同的方法吗?

如果没有,是否有 Virtual Scroll 的替代选项? (无限滚动不是一个选项)

最佳答案

我还没有用过 angular2-virtual-scroll我自己打包(这是我假设你引用的那个),但我知道 Angular Material2 团队正在努力将虚拟滚动添加到他们的库中,他们有一个 open PR for adding "scrollTo" functionality for virtual scroll lists of fixed size .

通过检查它们的实现,您应该能够为您的用例构建一个虚拟的“scrollTo”函数(假设您正在处理“固定大小”列表)。这是该 PR 中的一些相关代码,但是 you'll really want head over and examine their full implementation :

  /**  Scrolls to the offset on the viewport. */
scrollToOffset(offset: number, options = { smooth: false, lazy: false }) {
const viewportElement = this.elementRef.nativeElement;
const top = this.orientation === 'vertical' ? offset : 0;
const left = this.orientation === 'horizontal' ? offset : 0;

let shouldScroll = true;
if (options.lazy) {
const currentOffset = this.measureScrollOffset();
const currentOffsetEnd = currentOffset + this.getViewportSize();
shouldScroll = offset < currentOffset || offset > currentOffsetEnd;
}

if (shouldScroll) {
if (options.smooth && supportsSmoothScroll()) {
viewportElement.scrollTo({ left, top, behavior: 'smooth' });
} else {
if (this.orientation === 'vertical') {
viewportElement.scrollTop = top;
} else {
viewportElement.scrollLeft = left;
}
}
}
}

/** Scroll the viewport to the specified index. */
scrollToIndex(index: number, options = { smooth: false, lazy: false }) {
const contentSize = this.measureRenderedContentSize();
const offset = this._scrollStrategy.getScrollOffsetForIndex(index);
this.scrollToOffset(offset, options);
}

并且在与 this._scrollStrategy 对象关联的文件中:

  /** Get the offset for the given index. */
getScrollOffsetForIndex(index: number) {
return index * this._itemSize;
}

此外,如果您确实构建了一些东西,我想 angular2-virtual-scroll 项目会欢迎您的 PR。

关于angular - ionic 滚动到带有虚拟滚动的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51230645/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com