移动端开发经常需要用到上拉加载更多的指令,放在这里以供大家使用,注意这里需要引入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>