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,如何和现有的代码结合起来?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论