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

发布于 2022-09-03 19:27:23 字数 2763 浏览 23 评论 0

我要做一个滚到底部自动加载更多的功能,现在用了插件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,如何和现有的代码结合起来?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文