1

我有以下代码。

主页.html：

<ion-list [virtualScroll]="newDates" approxItemHeight="50px">
<ion-item *virtualItem="let date" id="i">
{{date.holiday}}
</ion-item>
</ion-list>

home.ts:

scrollTo(){
let yOffset = document.getElementById('25').offsetTop;
this.content.scrollTo(0, yOffset);
}

例如我必须向下滚动到 i=25

以下方法适用于没有VirtualScroll的普通列表。

VirtualScroll 不显示在视图上看不到的元素，因此我们得到一个错误 yOffset is null

4

2 回答 2

2

ionic 包含的虚拟滚动组件是一个非常奇怪且漏洞百出的组件。在我什至开发的应用程序中，我尝试使用它，但最终我更喜欢使用angular2-virtual-scroll。我认为您可以尝试使用此组件，而不是您正在使用的当前组件。

于 2018-05-07T09:45:22.603 回答
0

我知道这是一个老问题，但我无法找到同一个问题的答案，所以我会发布我的答案。scrollTo 元素不起作用，因为页面上尚不存在该元素。我认为只有可见的存在于 DOM 女巫中才是虚拟滚动背后的全部想法。所以这就是我或多或少解决问题的方法：

y = 0;
@ViewChild(IonContent) content: IonContent;

async scrollTo(elementId: string) {
  if (!document.getElementById(elementId)) { 
    await this.content.scrollToPoint(0, this.y, 0);
    setTimeout(() => {
      this.y = this.y + 100;
      return this.scrollTo(elementId);
    }, 0);
  }
  if (document.getElementById(elementId)) { 
    document.getElementById(elementId).scrollIntoView(); 
  }
}

基本上，该函数向下滚动 100 px 检查元素是否存在，如果现在向下滚动更多，直到找到它。我敢肯定还有更多要添加的内容，例如如果列表到达末尾并且没有找到元素...它可能会进入无限循环...尽管如此这可能会为某人服务...干杯！

于 2021-07-21T12:09:46.827 回答