1

私は次のコードを持っています。

home.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

0

これが古いスレッドであることは知っていますが、同じ質問に対する答えが見つからなかったため、回答を投稿します。要素がまだページに存在しないため、scrollTo 要素は機能しません。目に見えるものだけが DOM witch で終了することが、仮想スクロールの背後にある全体的なアイデアだと思います。だからここに私が多かれ少なかれ問題を解決した方法があります：

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ピクセル下にスクロールし、要素が存在する場合はそれが見つかるまでさらに下にスクロールします。リストが最後に達し、要素が見つからなかった場合のように、さらに追加する必要があると確信しています...おそらく無限ループになります...それでも、これは誰かに役立つかもしれません...乾杯!

于 2021-07-21T12:09:46.827 に答える