angularjs实现下拉加载更多

最新推荐文章于 2025-06-19 22:05:12 发布

蓝色的乌鸦

最新推荐文章于 2025-06-19 22:05:12 发布

阅读量6.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html5 javascript 文章标签： angularjs 滑动加载更多

本文链接：https://blog.youkuaiyun.com/wangkadm/article/details/48649449

javascript 同时被 2 个专栏收录

8 篇文章

订阅专栏

html5

6 篇文章

订阅专栏

本文介绍了一种使用AngularJS指令实现的下拉加载更多数据的方法。通过监听滚动事件并在达到页面底部90%时触发加载函数，实现了动态加载数据的功能。

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

angularjs实现下拉加载更多数据,

我是通过指令来实现的,直接上代码

.directive("scroll",  ["$window", "$document",function ($window, $document) {
    return function(scope, element) {
        angular.element($window).bind("scroll", function() {
            var pageYOffset = $window.pageYOffset;
            var clientHeight = $document[0].documentElement.clientHeight;
            var offsetHeight = $document[0].body.offsetHeight;
            //当滚动到90%的时候去加载
            if(pageYOffset+clientHeight>offsetHeight*0.9)
            {

                //scope.shopWorkCanLoad是否可加载,controller中定义
                //scope.shopWorkOnLoad是否正在加载,controller中定义
                if(scope.shopWorkCanLoad==true && scope.shopWorkOnLoad==false){
                    //加载数据,controller中定义
                    scope.loadShopWork();//
                }
            }
        });
    };
}]);

就这么多

用法我就不用再说了吧

2018年4月14日19:19:44更新

1.加载更多的函数可以传入

2.可以绑定到div的滚动监听上面

<div class="classContent" scroll has-more="hasMore" on-loading="onLoading" load-more="getMoreList()">
</div>

.directive("scroll",  ["$window", "$document",function ($window, $document) {
   return {
      scope: {//=将ngModel同指定对象绑定 &将引用传递给这个方法 @储存与fromName相关联的字符串
         hasMore: '=', // 将hasMore同指定对象绑定
         onLoading: '=', // 将onLoading同指定对象绑定
         loadMore: '&', // 将引用传递给这个方法
      },
      link:function(scope, element) {
         angular.element(element).bind("scroll", function(event) {
            let _element=event.target;
            var {scrollHeight,scrollTop,clientHeight} = _element;
            if(scrollTop+clientHeight>scrollHeight*0.9){
               if(scope.hasMore==true && scope.onLoading==false){
                  scope.loadMore();
               }
            }
         });
      }
   };
}]);