angularjs 上拉加载更多指令

移动端开发经常需要用到上拉加载更多的指令,放在这里以供大家使用,注意这里需要引入jquery,原生js也可以实现,通过boolean和延时器来控制0.5秒后继续执行下拉加载更多,以防重复请求.

指令部分代码

app.directive('whenScrolled', function() {    return function(scope, elm, attr) {        // body窗口的滚动加载--需要Jquery        var forbid = false;        $(window).scroll(function () {            //滚动条距离顶部的距离            var scrollTop = $(window).scrollTop();            //滚动条的高度            var scrollHeight = $(document).height();            //窗口的高度            var windowHeight = $(window).height();            if (scrollTop + windowHeight >= scrollHeight) {                if(!forbid){                    scope.$apply(attr.whenScrolled);                    forbid = true;                    setTimeout(function(){                        forbid = false;                    },500)                }            }        });    };});

html部分代码 加入属性when-scrolled="想要执行的函数即可" 一下是代码示例

<div class="weui-loadmore weui-loadmore_line weui-loadmore_dot" when-scrolled="loadMoreLine()" ng-hide="isLastStationPage||isLocating">    <span class="weui-loadmore__tips">加载更多</span></div>