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>