AngularJS：與不同高度的行重複虛擬

Question

我正在構建一個使用離子和AngularJS（AngularJS材質）的混合應用程序。此應用程序還具有與Node.js和socket.io構建的集成聊天。

我現在遇到的問題是，只有200條消息，應用程序加載所有消息的速度非常緩慢（瀏覽器中的200ms - 應用程序中的4sec，即使使用CrossWalk，也使用message.id跟蹤）插入消息的textarea速度會變慢。

我有兩個解決方案來解決此問題：

1. 虛擬重複（MD-虛擬重複）
2. 無限滾動（離子無限滾動）

1）我認爲，虛擬重複將是最好的解決方案（我已經在另一個頁面上實現了它，它可以像魅力一樣滾動1500個項目），但問題是根據消息長度和md-virtual-repeat要求，消息可能具有不同的高度。元素必須與w具有相同的高度掃。

2）所以，也許我們可以轉到無限滾動方法，但現在的問題是，使用ion-infinite-scroll指令來做到這一點有點棘手，因爲聊天需要在到達頂部時觸發loadMore（）而不是底部。

所以我的問題是：沒有任何人有一種變通方法有一個平滑/快聊天中使用NG-重複或，可處理不同高度或的無限滾動，在該工作的虛擬重複指令頂部？

Answer 1

您是否看過React.js作爲解決方案？它使用虛擬DOM，這使得更新長列表更有效率。

GitHub上有一個開源的repo，它將Angular和React混合在一起，稱爲ngReact。

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

文檔： http://ngreact.github.io/ngReact/docs/ngReact.html

回購： https://github.com/ngReact/ngReact

希望這有助於。

Answer 2

使用單獨的粘合劑，如鉚釘可能是一個很好的解決方案，它易於集成，其具有RV-每個循環

Answer 3

我覺得離子指令collection-repeat可能是你在找什麼。

collection-repeat允許應用程序顯示比ng-repeat更多的項目的巨大列表 。它只顯示當前可見的 項目。這意味着在 可以放八個項目的電話屏幕上，只會顯示與當前卷軸 位置相匹配的八個項目。

Answer 4

你可以嘗試加速它的一些事情。

其中之一是使用像快速-NG-重複：https://github.com/allaud/quick-ng-repeat，而不是建立在角JS NG-重複

另一個辦法是使用one time binding在以往任何時候可以防止角從期間每不斷尋找變化摘要循環：https://docs.angularjs.org/guide/expression#one-time-binding

當然，如果可能的話，請嘗試使用chrome的開發人員工具配置文件選項來找出哪些函數會降低應用程序的速度; ）

PS：可能是值得檢查出這個線程看看無限滾動逆如何可以實現：Implementing a reverse infinite scroll using ngInfiniteScroll directive in AngularJS

Answer 5

像md-virtual-repeat或collection-repeat高效滾動列表需要了解每個項目的高度才能工作。這是因爲他們需要知道滾動位置，例如顯示一個滾動條或可以跳過幀以快速向下滑動。滾動位置本身只有在知道滾動了多少（我們需要上面元素的高度）以及剩下多少滾動（我們需要下面元素的高度）時才能找到滾動位置本身。

你可以做的是使用工廠計算每個元素的高度，然後將它們注入到循環中。這可以通過創建一個與目標容器具有相同屬性的容器（例如CSS類），追加新加載的元素，計算它們的高度（使用element.offsetHeight）並在之後刪除容器來完成。

請注意，這是相當重的，並可能會導致一個小的滯後高峯。

Answer 6

看角VS-重複angular-vs-repeat

演示：demo

我使用線路長度的項目的計算高度。

這是非常近似的方法。在我們的應用程序中，我們知道，字體大小爲15px的英文字符寬度大約爲6.7px（這很好，如果使用等寬字體，但它不是我們的情況）。我們也總是知道每個段的寬度和一條文本行的高度。 itemHeight = commulativeTextLenght/lineWidth + paddingsOfItem; 同樣，折線階可能會影響您的計算。一般來說，我們有一個不錯的方法來計算約8000個文本段落的高度。