滚动时无限滚动，销毁和重新创建元素

Question

我知道这可能是一个热门问题，但我想向这里的专家寻求专门针对我的问题的建议。

我的网页代表一棵具有无限滚动的树（意为植被），例如树的中间部分 - 图像，是迭代的，迭代次数取决于我的数据源。

因此，数据源是用户记录，将在树上表示为叶子。树的每个中间部分恰好有 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>';
      }
  }

Answer 1

设置一个服务，在调用时返回您需要的数据而不是预渲染它是理想的。 Their service demo 提供了一个 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,
            };
        }
    ]);