2017-06-28 29 views
3

私は2つの個人間で作成された「最初の」メッセージに無限にスクロールしようとしているIonicアプリで、チャットアプリケーションの機能の最後の部分にいるあなたが使ったアプリ、Facebook、Skype、Slackなど。Ionic 2/4 Infinite Scrollが上向きになっています...下向きではなく、チャットアプリケーション用です。奇妙な間隔と奇妙な行動

私がやっている問題はいくつかあります。私はすべてのメッセージを収容する<ul>上無限スクロールのコードを追加すると

  1. 、私は(私はロードスピナーを考慮するためだと思う)巨大200pxの高さの空白を取得します。ここに私のコードは次のとおりです。

     <ion-infinite-scroll (ionInfinite)="scrolled($event)" 
         threshold="10px" 
         position="top"> 
         <ion-infinite-scroll-content></ion-infinite-scroll-content> 
         </ion-infinite-scroll> 
         <ul> 
         <li *ngFor="let message of messages; let i = index"> 
         ... other code to build the message 
         </li> 
         </ul> 
    
  2. 私はアイデアは、それが彼の「トップ」無限スクロール領域と、それがために照会することであることで、特定の会話のためだけに最初の10件のメッセージをつかむために私のチャットを設定しています次の10などです。問題は、チャットが読み込まれると、スクロールが画面の最後までスクロールして最後に送信されたメッセージを表示するまでに一時的な一時停止があることです。しかし、その短い瞬間には、スクロール側はすでにscrolled()の機能を発動するために<ion-infinite-scroll>に示すようなページの上部にあります。

他に誰かがこのようなことをしていますか?ページがレンダリングされると、メッセージは非同期に読み込まれるため、<ion-infinite-scroll>がページの読み込みに失敗するのを防ぐ最良の方法を見つけようとしています。私はここで行方不明の単純なものがありますか?

ありがとうございます! :)

+0

.tsファイルの内容を確認できます –

答えて

0

#2の場合、チャットの最初のバッチを読み込むときにスクロールを無効にすることができます。

インポートViewChildInfiniteScroll

import { ViewChild } from '@angular/core'; 
import { InfiniteScroll } from 'ionic-angular'; 

その後infiniteScrollのプロパティを作成します。

@ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll; 

そして、それを無効にする、自分のものをロードし、スクロールを行い、再有効化:

ionViewDidLoad(): void { 
    // Disable to give time for loading & scrolling 
    this.infiniteScroll.enable(false); 

    loadFirstTenChats().then(() => { 
    // Fiddle with the timing depending on what you are doing. 

    // If you have footers or other dynamic content to worry about. 
    setTimeout(() => this.content.resize(), 100); 

    // Scroll to the bottom once the size has been calculated: 
    setTimeout(() => this.content.scrollToBottom(100), 200); 

    // The scroll above has to be finished before enabling or 
    // else the IS might think it needs to load the next batch. 
    setTimeout(() => this.infiniteScroll.enable(true), 1000); 
    }); 
} 

#1の理由で、私はなぜそれほどミューを占めるのか分かりません上記の場合はページ外にスクロールされ、気付かれません。