Angular无限滚动指令-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_36703936/article/details/53157692

本文介绍了一个自定义的Angular指令，该指令实现了无限滚动加载的功能。通过监控滚动位置，当接近页面底部时自动触发加载更多数据的操作。文章详细展示了如何设置和使用此指令，并提供了具体的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先地引用jquery，然后引用angular，先后顺序

app.directive('infiniteScroll', ['$rootScope', '$window', '$timeout', function ($rootScope, $window, $timeout) {
   return {
      link: function (scope, elem, attrs) {
         var checkWhenEnabled, handler, scrollDistance, scrollEnabled;
         $window = angular.element($window);
         scrollDistance = 0;
         if (attrs.infiniteScrollDistance != null) {                  //接收并返回触发加载更多的距离
            scope.$watch(attrs.infiniteScrollDistance, function (value) {
               return scrollDistance = parseInt(value, 10);
            });
         }
         scrollEnabled = true;
         checkWhenEnabled = false;
         if (attrs.infiniteScrollDisabled != null) {
            scope.$watch(attrs.infiniteScrollDisabled, function (value) {
               scrollEnabled = !value;
               if (scrollEnabled && checkWhenEnabled) {
                  checkWhenEnabled = false;
                  return handler();
               }
            });
         }
         handler = function () {
            var elementBottom, remaining, shouldScroll, windowBottom;
            windowBottom = $window.height() + $window.scrollTop();//所选中元素展示框的高度 + 滑动条向下滑动的距离
            elementBottom = elem.offset().top + elem.height();    //页面的总长度
            remaining = elementBottom - windowBottom;
            shouldScroll = remaining <= $window.height() * scrollDistance;
            if (shouldScroll && scrollEnabled) { //达到可加载距离
               if ($rootScope.$$phase) {
                  return scope.$eval(attrs.infiniteScroll);
               } else {
                  if (remaining <= 50 ) {
                     scope.loadMore();                //在此调用加载更多的函数
                  }
                  return scope.$apply(attrs.infiniteScroll);
               }
            } else if (shouldScroll) {
               return checkWhenEnabled = true;
            }
         };
         $window.on('scroll', handler);                           //监控scroll滑动则运行handler函数
         scope.$on('$destroy', function () {                      //离开页面则关闭scroll与handler的绑定
            return $window.off('scroll', handler);
         });
         return $timeout((function () {
            if (attrs.infiniteScrollImmediateCheck) {
               if (scope.$eval(attrs.infiniteScrollImmediateCheck)) {
                  return handler();
               }
            } else {
               return handler();
            }
         }), 0);
      }
   };
}
])

滑动数据获取

$scope.PageIndex =1;
$scope.domore = true;
$scope.persondoclistdoclist = new Array();
$scope.loadMore = function () {
   var _user={"pageNo":$scope.PageIndex,"pageSize":5};
   vdf.sendPost({
      data:_user,
      encrypt:false,
      code:'300015',
      success:function(w){
         $scope.persondoclist=w.data;
         var news = w.data.doclist;
         $scope.persondoclistiareaid=w.data.iareaid;
         if (news==null||news.length==0||news.length==""||news.length==undefined){
            $scope.domore=false;
            $scope.clististance=true;
            $scope.clixzsstance=false;
         }else {
            $scope.cityname()
            $scope.PageIndex++;
            for(var a=0 ;a<news.length;a++) {
               $scope.clixzsstance=true;
               $scope.persondoclistdoclist.push(news[a]);
            }
            $scope.$broadcast('scroll.infiniteScrollComplete');
         }
      },error:function(a){

      }
   });
}

html需要有滑动事件<div infinite-scroll="" infinite-scroll-distance="1"></div>

angular 滑动事件