滾動時無限滾動，破壞和重新創建元素

Question

我知道這可能是一個很普遍的問題，但是我想向這里的專家尋求專門針對我的問題的建議。

我的網頁代表一棵無限滾動的樹（意為植被），例如樹的中間部分（圖像）是迭代的​​，迭代次數取決於我的數據源。

因此，數據源是將以樹上的葉子表示的用戶記錄。 樹的每個中間部分正好有n葉子， 每個葉子都有onClick ajax偵聽器：

我知道我可以在用戶向下滾動時將元素追加到我的容器中，但是問題是，即使列表頂部的行在滾動到視圖外時變得不可見，它們仍然是頁面的一部分並且仍然占用資源。 因此，Web應用程序速度變慢，並且偵聽器可能無法正常工作。

我正在尋找能在元素變得不可見時動態銷毀它們的插件，並在它們再次變得可見時重新創建它們。

我幾乎找到了解決方案ui-scroll angular指令，但是不確定如何應用它。 這是codepen ，您的叉子將不勝感激。

我的頁面現在正在這樣工作，沒有動態加載：

foreach($leaves as $i=>$leaf)
{
     if($i % NUM_OF_LEAVES == 0)
     {
         echo "<div class='tree-section'>";
         echo '<img class="part" src="'.Yii::$app->request->baseUrl.'/images/tree_center.png"/>';  
             echo '<div class="leaves">'; 

             for($j = 0; $j<NUM_OF_LEAVES ; $j++)
             {
                 if(isset($leaves[$i + $j])){
                     //show leaf $leaves[$i + $j]
                 }
             }
             echo '</div>';
         echo '</div>';
      }
  }

Answer 1

設置服務以在調用時返回需要的數據而不是預先呈現它是理想的。 他們的服務演示提供了一個get函數，您應該使用對服務器的$http調用來替換此get函數，以使其僅返回您需要的樹塊（類似於分頁響應）。

一個未經測試的例子可能是

angular.module('application', ['ui.scroll', 'ui.scroll.jqlite'])
    .factory('datasource', ['$http',
        function ($http) {

            var get = function(index, count, success){
                // gets data from /datasourceapi/tree/?index=XXX <-- XXX is the offset from the beginning
                return $http({
                    url:'/datasourceapi/tree/',
                    method: 'GET',
                    params:{index: index}
                }).then(function(response){
                    return success(response);
                });
            }

            return {
                get: get,
            };
        }
    ]);