简介
上拉加载，是目前手机网站加载数据的一种常用方式，本文主要讲解AnglarJs集成，上拉加载功能。通常与下拉刷新配置使用，下拉刷新请查阅。
实现
页面
-
-
-
{{branch.title}}
-
联系人:{{branch.linkman}} 品种:{{branch.varieties}} 价格:{{branch.price}}
-
地址:{{branch.region}}微信号:{{branch.wechatno}}
-
发布时间:{{branch.releasetime}}
loading......
我也是有底线的
controller中上拉加载功能使用
app.controller('wdListCtrl', ['$scope','catInfoService', function ($scope,catInfoService) {
//下拉加载service
$scope.catinfo = new catInfoService();
封装上拉加载CatInfoService.js
/** 2017-10-26
*作者:卜凡起
*功能:
*/
define(['jquery','app'], function ($,app) {
app.service('catInfoService', ['$location','$http', function($location,$http) {
var CatInfo = function () {
this.items =null;
this.busy = false;
this.after = '';
this.page = 1;
this.pagenum =10;
this.title = '';
this.varieties ='';
};
CatInfo.prototype.nextPage = function () {
if (this.busy) return;
this.busy = true;
var url = baseurl+"接口地址?page=" + this.page + "&pagenum="+ this.pagenum + "&title="+this.title+ "&varieties="+this.varieties+"&callback=JSON_CALLBACK";
$http.jsonp(url).success(function(data) {
var items =data.data;
console.log(items);
if( this.items == null){
this.items=items;
}else{
for (var i =0;i < items.length; i++) {
this.items.push(items[i]);
}
}
this.after = "t_" + this.items[this.items.length -1 ].id;
if(items != null){
if(items.length< 10){
this.busy = true;
}else{
this.busy = false;
}
}
this.page +=1;
}.bind(this));
};
return CatInfo;
}] );
});
效果
总结
以上所述是小编给大家介绍的AnglarJs中的上拉加载实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！