javascript - angular实现懒加载

问题描述

问 题

如何实现angular的懒加载，每次加载10条数据，滑到底部再次加载10条数据

解决方案

写个directive，然后在里面监听滚动，滚动结束后判断是不是到了底部，如果到了底部再回调。

随手写了一截代码，未测试，尽管使用，错了再改。

app.directive('scrollOnBottom', [function() {
  return {
    restrict: 'AE',
    scope: {
      scrollOnBottom: '&',
      selfEle: '='
    },
    link: link
  };

  function link(scope, ele, attr) {

    var target = window;
    var element = document.body;
    if (scope.selfEle) {
       target = ele[0];
       element = ele[0];
    }

    target.addEventListener('scroll', scorllHandle, false);

    function scorllHandle(ev) {
      if (getRect(element).isBottom) scope.scrollOnBottom({$event: ev});
    }

    scope.$on('$destroy', function() {
      target.removeEventListener('scroll', scorllHandle, false);
    });
  }

  function getRect(ele){
    var inHeight=window.innerHeight;
    var rect=ele.getBoundingClientRect();

    // rect.isVisible = rect.top - inHeight<0;  // 是否在可视区域
    rect.isBottom = rect.bottom - inHeight<=0;
    return rect;
  }
}]);

这篇关于javascript - angular实现懒加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！