web-dev-qa-db-ja.com

AngularJS：高さが異なる行を使用した仮想リピート

ionicとAngularJS（AngularJS-material）を使用してハイブリッドアプリを構築しています。このアプリには、Node.jsとsocket.ioで構築された統合チャットもあります。

メッセージが200個しかない場合、アプリがすべてのメッセージを読み込むのに非常に時間がかかるという問題があります（CrossWalkを使用し、message.idで追跡する場合でも、ブラウザーで200ミリ秒->アプリで4秒）。メッセージの挿入が遅くなります。

これを解決するための2つの解決策があります。

  1. 仮想リピート（md-virtual-repeat）
  2. 無限スクロール（ion-infinite-scroll）

1）仮想リピートが最善の解決策だと思います（私はすでに別のページに実装しており、チャームのように1500アイテムをスクロールします）が、問題は、メッセージの長さとmd-virtual-に基づいてメッセージの高さが異なる可能性があることです繰り返しの要件は、すべての要素が機能するために同じ高さでなければならないということです。

2）したがって、Infinite Scrollメソッドにピボットできるかもしれませんが、問題は、ion-infinite-scrollディレクティブを使用してそれを行うと、チャットが下部ではなく上部に到達したときにloadMore（）をトリガーする必要があるため、少し注意が必要になることです。 。

だから私の質問は：チャット内でまたはさまざまな高さを処理できる仮想リピートディレクティブを使用してスムーズ/高速のng-リピートを行うための回避策はありますかまたは上部で機能する無限スクロール？

javascriptangularjsionicangularjs-ng-repeatangular-material
22
Matteo Cardellini

md-virtual-repeatやcollection-repeatのような効率的なスクロールリストは、機能するために各アイテムの高さを知る必要があります。これは、スクロール位置を知る必要があるためです。スクロールバーを表示したり、フレームをスキップしてすばやく下にスワイプしたりできます。スクロール位置自体は、スクロールされた量（上の要素の高さが必要）と残りのスクロール量（下の要素の高さが必要）の両方を知っている場合にのみ見つけることができます。

できることは、ファクトリを使用して、要素をループに挿入する前に各要素の高さを計算することです。これは、ターゲットコンテナと同じプロパティを持つコンテナ（CSSクラスなど）を作成し、新しくロードされた要素を追加し、それらの高さを計算し（element.offsetHeightを使用）、後でコンテナを削除することで実行できます。

これは非常に重く、小さなラグスパイクが発生する可能性があることに注意してください。

2
Iso

あなたがそれをスピードアップしようとすることができるいくつかのこと。

1つは、quick-ng-repeatのようなものを使用することです： https://github.com/allaud/quick-ng-repeat 組み込みのangular js ng-repeat

もう1つは、可能な限りone time bindingを使用して、angularがダイジェストサイクルごとに常に変更を探すのを防ぐことです： https://docs.angularjs.org/guide/expression＃one-time-binding

そしてもちろん、可能であれば、chromeの開発者ツールプロファイルオプションを使用して、どの関数がアプリケーションの速度を低下させているかを調べてみてください。 ）

PS：このスレッドをチェックして、逆無限スクロールを実装する方法を確認する価値があるかもしれません： AngularJSでngInfiniteScrollディレクティブを使用して逆無限スクロールを実装する

2
Chanthu

ionicディレクティブ collection-repeat があなたが探しているものかもしれないと思います。

collection-repeatを使用すると、アプリはng-repeatよりもはるかにパフォーマンスの高いアイテムの膨大なリストを表示できます。現在表示されている数のアイテムのみをDOMにレンダリングします。これは、8つのアイテムを収めることができる電話画面では、現在のスクロール位置に一致する8つのアイテムのみがレンダリングされることを意味します。

1
nicfo

リベットのような別々のバインダーを使用することは良い解決策であり、統合が容易であり、それぞれがループするrvを持っています

1
krishnakumar sekar

解決策としてReact.jsを検討しましたか？長いリストの更新をより効率的にする仮想DOMを使用します。

GitHubには、AngularとReactを組み合わせた、ngReactと呼ばれるオープンソースリポジトリがあります。

概要： http://ngreact.github.io/ngReact/

ドキュメント： http://ngreact.github.io/ngReact/docs/ngReact.html

リポジトリ： https://github.com/ngReact/ngReact

お役に立てれば。

1
Matt

angular-vs-repeatangular-vs-repeat を見てください

デモ： デモ

アイテムの高さの計算には線の長さを使用します。

これは非常に近似的な方法です。私たちのアプリでは、フォントサイズが15pxの1つの英語の文字の幅が約6.7pxになることがわかっています（モノスペースフォントを使用している場合は問題ありませんが、私たちの場合はそうではありません）。また、各セグメントの幅と1つのテキスト行の高さも常にわかっています。 itemHeight = commulativeTextLenght/lineWidth + paddingsOfItem;また、改行スタイルは計算に影響を与える可能性があります。一般に、約8000のテキスト段落の高さを計算するための悪くない方法がありました。

0
Mikhail Kostin