angular的滚到底部自动加载具体如何操作,求大神帮忙

我要做一个滚到底部自动加载更多的功能,现在用了插件ng-infinite-scroll,写成这样:
JS:

egVideoApp.controller('videoListCtrl',
         function ($scope, addMore) {
        $scope.addmore = new addMore();
});
egVideoApp.factory('addMore', function ($http) {
         var addMore = function () {
                 this.videos = [];
                 this.busy = false;
                 this.after = '';
                 this.page = 1;
             };

         addMore.prototype.nextPage = function () {
                 if (this.busy) return;
                 this.busy = true;
                 var url = "http://api.ergeng.com/normalvideo/list?after=" + this.after + "&callback=JSON_CALLBACK";
                 $http.jsonp(url).success(function (data) {
                     console.log(data);
                     var videos = data.data.list;
                         for (var i = 0; i < videos.length; i++) {
                                 this.videos.push(videos[i]);
                             }
                         this.after =this.videos[this.videos.length - 1].id;
                         this.busy = false;
                         this.page += 1;
                     }.bind(this));
             };
         return addMore;
     });

html:

<div class="page-group">
    <div class="page page1" id="videoList" ng-cloak>
        <div class="content">
            <div class="row no-gutter" infinite-scroll='addmore.nextPage()' infinite-scroll-disabled='addmore.busy' infinite-scroll-distance='1'>
                <a class="col-100 single-work posr display-block" ng-repeat="video in addmore.videos" href="detail.html">
                    <div class="works-detail">
                        <h2 class="works-topic">{{video.title}}</h2>
                        <p>
                            <span class="works-type">{{video.category_name}}</span>
                            <span class="works-time">{{video.duration}}</span>
                        </p>
                    </div>
                    <div class="posa mask"></div>
                    <img ng-src="{{video.cover}}">
                </a>
                <div ng-show='addmore.busy' class="loading"><img src="../images/m_home/icon_loading.gif"></div>
                <div class="the-end"><img src="../images/m_home/bg_loadend.png"></div>
            </div>
            <div class="footer">
                <img src="../images/m_home/logo_text.png">
            </div>
        </div>
    </div>
</div>

现在后台给我两个接口,一个page,一个pageSize,如何和现有的代码结合起来?

阅读 2.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题