长数组列表渲染使 Angular.js 中的页面滚动变慢 [英] Long array list rendering makes page scrolling slow in Angular.js

问题描述

当尝试从一个数组(带有图像)渲染超过 120 个项目时，列表的滚动会变慢.基本上，当我在无限滚动中加载新数据时，我将旧数组数据与新数组数据连接起来.

另一方面，像dribbble、behance这样的流行网站似乎没有这个问题.也许这个问题是 Angular.js 特有的?有没有人在他们的项目中遇到过这个问题?

解决方案

在 ANGULARJS 中无限滚动

不需要任何额外的插件.

app = angular.module("demo", []);app.controller("MainController", function($scope, $http){//代表列表的数组$scope.items = ["1. 滚动列表加载更多"];$scope.loading = true;//此函数获取随机文本并将其添加到数组$scope.more = function(){$http({方法:获取"，网址:https://baconipsum.com/api/?type=all-meat&paras=2&start-with-lorem=1"}). 成功(功能(数据，状态，标题，配置){//返回的数据包含一个包含 2 个句子的数组for(数据行){newItem = ($scope.items.length+1)+"."+data[line];$scope.items.push(newItem);}$scope.loading = false;});};//我们调用该函数两次以填充列表$scope.more();});//我们创建了一个简单的指令来修改 <ul> 的行为app.directive("whenScrolled", function(){返回{限制:'A'，链接:功能(范围，元素，属性){//我们得到一个大小为 1 的元素列表并需要第一个元素原始 = 元素 [0];//当滚动超过限制时我们加载更多元素elem.bind("滚动", function(){if(raw.scrollTop+raw.offsetHeight+5 >= raw.scrollHeight){scope.loading = true;//我们可以给出任何将更多元素加载到列表中的函数scope.$apply(attrs.whenScrolled);}});}}});

li{显示:块；列表样式类型:无；底边距:1em；}ul{高度:250px；背景:#44E394；颜色:#fff;溢出:自动；宽度:550px；边框半径:5px；保证金:0 自动；填充:0.5em；边框:1px 虚线 #11BD6D；&::-webkit-scrollbar{宽度:8px；背景颜色:透明；};&::-webkit-scrollbar-thumb{背景色:#b0fccd;边框半径:10px；}&::-moz-scrollbar{宽度:8px；背景颜色:透明；};&::-moz-scrollbar-thumb{背景色:#b0fccd;边框半径:10px；}&::-ms-scrollbar{宽度:8px；背景颜色:透明；};&::-ms-scrollbar-thumb{背景色:#b0fccd;边框半径:10px；}}身体{文字对齐:居中；字体大小:1.2em；字体系列:Helvetica"；颜色:#44E394；背景:url(数据:图像/png；base64，iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAG0lEQVQIW2P88OHDfwY0wAgSFBAQYEQWp1AQAKUbE9XRpv7GAAAAAElFTkSuQmCC)重复；填充:2em；}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div data-ng-app='demo'><div data-ng-controller='MainController'><ul class='hello' when-scrolled='more()'>
{{物品}}
<div data-ng-show='loading'>加载</div>

<h1>AngularJS 中的无限滚动</h1>

When trying to render more than 120 items from an array (with images) the scrolling of the list becomes slower. Basically, when I am loading new data in infinite scroll, I am concatenating old array data with new array data.

On the other hand, popular websites like dribbble, behance dont seem to have this issue. Maybe this issue is specific to Angular.js? Has anyone faced this problem in their projects?

解决方案

INFINITE SCROLLING IN ANGULARJS

No need of any additional plugins.

app = angular.module("demo", []);

app.controller("MainController", function($scope, $http){
  
  // the array which represents the list
  $scope.items = ["1. Scroll the list to load more"];
  $scope.loading = true;
  
  // this function fetches a random text and adds it to array
  $scope.more = function(){
    $http({
      method: "GET",
      url: "https://baconipsum.com/api/?type=all-meat&paras=2&start-with-lorem=1"
    }).success(function(data, status, header, config){
      
      // returned data contains an array of 2 sentences
      for(line in data){
        newItem = ($scope.items.length+1)+". "+data[line];
        $scope.items.push(newItem);
      }
      $scope.loading = false;
    });
  };
  
  // we call the function twice to populate the list
  $scope.more();
});

// we create a simple directive to modify behavior of <ul>
app.directive("whenScrolled", function(){
  return{
    
    restrict: 'A',
    link: function(scope, elem, attrs){
    
      // we get a list of elements of size 1 and need the first element
      raw = elem[0];
    
      // we load more elements when scrolled past a limit
      elem.bind("scroll", function(){
        if(raw.scrollTop+raw.offsetHeight+5 >= raw.scrollHeight){
          scope.loading = true;
          
        // we can give any function which loads more elements into the list
          scope.$apply(attrs.whenScrolled);
        }
      });
    }
  }
});

li{
  display:block;
  list-style-type:none;
  margin-bottom: 1em;
}

ul{
  height:250px;
  background: #44E394;
  color: #fff;
  overflow:auto;
  width:550px;
  border-radius: 5px;
  margin:0 auto;
  padding: 0.5em;
  border: 1px dashed #11BD6D;
  &::-webkit-scrollbar{
    width:8px;
    background-color:transparent;
  };
  &::-webkit-scrollbar-thumb{
    background-color:#b0fccd;
    border-radius:10px;
  }
  &::-moz-scrollbar{
    width:8px;
    background-color:transparent;
  };
  &::-moz-scrollbar-thumb{
    background-color:#b0fccd;
    border-radius:10px;
  }
  &::-ms-scrollbar{
    width:8px;
    background-color:transparent;
  };
  &::-ms-scrollbar-thumb{
    background-color:#b0fccd;
    border-radius:10px;
  }
}

body{
  text-align:center;
  font-size:1.2em;
  font-family: "Helvetica";
  color: #44E394;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAG0lEQVQIW2P88OHDfwY0wAgSFBAQYEQWp1AQAKUbE9XRpv7GAAAAAElFTkSuQmCC) repeat;
  padding: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app='demo'>
  <div data-ng-controller='MainController'>
    <ul class='hello' when-scrolled='more()'>
      <li data-ng-repeat='item in items'>
        {{item}}
      </li>
    </ul>
    <div data-ng-show='loading'>Loading</div>
  </div>
</div>
<h1>INFINITE SCROLLING IN ANGULARJS</h1>

这篇关于长数组列表渲染使 Angular.js 中的页面滚动变慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！