无限滚动，滚动时摧毁并重新创建元素

我知道这可能是一个受欢迎的问题，但我想要征询这里的专家对我的问题的建议。无限滚动，滚动时摧毁并重新创建元素

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

因此，数据源是将在树上表示为树叶的用户记录。正好有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

无限滚动，滚动时摧毁并重新创建元素

回答

相关问题