- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我有一个大数据列表。
为了使滚动不滞后,我使用了 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/
有WHERE 1=1有什么作用如果您在脚本(伪代码)中编写此请求: sql = "SELECT f1,f2,f3 FROM t WHERE 1=1" ++ restOfTheClause
这个问题已经有答案了: R: Convert delimited string into variables (3 个回答) 已关闭 5 年前。 我有一个包含电影数据的表,在最后一列中,它包含电影所属
假设我有一个基类: struct A{ virtual void foo() = 0; }; 然后假设我有一个这样的派生类: struct B : public virtual A{ voi
我有一个小问题,我的 << 运算符没有被正确调用。 这是我的: class SomeInterface { friend std::ostream& operator<<(std::ostrea
首先,我来自 Java 社区,并且仍然是 C++ 的学习者。 请看下面的类 第二张图片显示了类“GameObject”的子类。它还有一个 Display() 方法。 GameObject类有5个子类,
我这里遇到了一些问题。我试图让我的代码像 java 中的接口(interface)一样工作。这个类被其他 2 个继承,因为它们导致了一些问题。而且我还想知道我是否做对了,以及改进我的代码的方法。我是新
在 C++ 中,我有一个基类 A,一个子类 B。两者都有虚方法 Visit。我想在 B 中重新定义“访问”,但 B 需要访问每个 A(以及所有子类)的“访问”功能。 我有类似的东西,但它告诉我 B 无
我有一个抽象类,它是类层次结构的根。该根类有一个带有一些简单实现的方法,似乎没有必要随时随地更改该实现。 使该方法成为非虚方法很好,但是某些子类可能会意外地重新实现它。在这种情况下,虚拟 final方
在 MSDN 上,我发现在抽象方法声明中使用“virtual”修饰符是错误的。我的一位同事应该是非常有经验的开发人员,但他在他的代码中使用了这个: public abstract class Busi
C++ 虚函数表是仅用于确定调用虚函数时应该执行哪一段代码,还是在运行时有其他用途? 在维基百科上,它列出了“动态调度”作为一个原因,但没有深入了解 C++ 的更多细节...... 最佳答案 一些实现
页面大小是否恒定?更具体地说,getconf PAGE_SIZE 给出 4096,这很公平。但这可以通过程序的运行时间改变吗?或者它在整个操作系统进程生成过程中是否保持不变。 IE。 , 进程是否可能
析构函数(当然还有构造函数)和其他成员函数之间的区别在于,如果常规成员函数在派生类中具有主体,则仅执行派生类中的版本。而在析构函数的情况下,派生版本和基类版本都会被执行? 很高兴知道在析构函数(可能是
如果一个函数被定义为虚函数并且与纯虚函数相同,这究竟意味着什么? 最佳答案 来自 Wikipedia's Virtual function... In object-oriented programm
我有一个在 Jetty 下运行的应用程序,我希望该应用程序返回自引用绝对 URL(生成 RSS 提要时,因此客户端必须能够在没有“当前 URL”上下文的情况下工作)。 问题是我事先不知道应用程序将部署
如何在两个virtualtreeview之间复制以复制所有列,而不仅仅是第一列? 复制前: 复制后: 最佳答案 树控件不保存任何数据。它不包含要显示的列数据,因此无法复制它。而是,当树控件想要显示任何
我已将 ShowHint 设置为 true 并将 HintMode 设置为 hmToolTip,但是当我将光标悬停在控件上时,我的 OnGetHint() 事件处理程序甚至没有断点。 知道我做错了什么
我的 friend 正在 Delphi 中使用 VirtualTreeView 工作,并且遇到了下一个问题:他有两列,第一列的每一行都有数据和子项。是否可以不更改第一列宽度来设置最大子列宽度? 图例:
我在我的 Virtual TreeView Component 中使用 TVirtualStringTree ( Delphi project 的一部分)我想创建一个 View ,其中 2 列可以有可
我想遍历 VirtualTreeView 的所有根并将其删除。 我不想清除它。 我收到此代码的访问冲突: var Node : PVirtualNode; begin if VirtualStri
我有一个可以输出表单的 PHP 文件。我想在服务器端调用这个 PHP 文件(当前使用“include”),填写并提交。 这样更好,因此我不必干预实际的 PHP 表单,只需处理表示层,以便数据可以被它自
我是一名优秀的程序员,十分优秀!