無限滾動，滾動時摧毀並重新創建元素

我知道這可能是一個受歡迎的問題，但我想要徵詢這裏的專家對我的問題的建議。無限滾動，滾動時摧毀並重新創建元素

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

因此，數據源是將在樹上表示爲樹葉的用戶記錄。正好有n葉子樹的每個中間部分，並且每個具有onClick AJAX聽衆葉：

我知道我可以追加元素，我作爲用戶向下滾動容器，但問題是，即使列表頂部的行在滾動出視圖時變得不可見，它們仍然是頁面的一部分，仍然佔用資源。所以網絡應用程序變慢，聽衆可能無法正常工作。

我正在尋找任何動態破壞元素的插件，因爲它們變得不可見並重新創建它們，如果它們再次變得可見。

我幾乎找到了解決方案angular ui-scroll directive但不知道如何應用它。這裏是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>'; 
     } 
    }

來源

2016-11-23 Gyuzal R

你有過用'角-UI-scroll'的演示一齣戲？ http://rawgit.com/angular-ui/ui-scroll/master/demo/serviceDatasource/serviceDatasource.html基於服務的方法，甚至是具有單一數據提取解決方案的inscope，可能對您在 – haxxxton

之後完美無缺@haxxxton，謝謝，請你看看這個codepen http://codepen.io/anon/pen/ZBKxaX，實現正是我需要的，但我不知道如何調整它以適應我的問題 –

設置，返回你需要調用的時候，而不是數據業務預渲染這將是理想的。 Their service demo提供了一個get函數，你應該把這個get函數替換爲$http調用你的服務器，讓它只返回你需要的樹結構（有點像分頁響應）。

這方面的一個例子未經測試會像

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, 
      }; 
     } 
    ]);

來源

2016-11-23 23:28:55 haxxxton

無限滾動，滾動時摧毀並重新創建元素

回答

相關問題