在开发中,不管是移动端还是web端,我们经常会遇到上拉加载更多的需求,有些时候,我们不想用scrollTop来判断,因为这样需要获取到页面的高度,比较麻烦,所以可以使用下面这种方式,完全不同去计算页面滚动的高度,奉上代码(angularJS,可根据自己的实际框架情况进行修改):
首先,我们先定义一个分页设置的对象:
$scope.pages = {
total: 0,
current: 1,
numTotal: 0
}
然后就是向后台请求数据:
$scope.loading = true; //加载效果(转圈圈)
$scope.getList(state){ //state判断是第一次请求还是上拉加载请求
$http.get('/neighbor/dynamic/releaseitems', {
params: {
keyword: $scope.search,
page: $scope.pages.current,
pagesize: 20,
sort: num
}
}).success(function (res) {
$scope.loading = false; // 关闭加载效果
$scope.pages.numTotal = Math.ceil(res.data.total / 20); //请求时计算总的页数,用于上拉加载时的判断
if (res && res.data.data.length > 0) { //有匹配数据返回的情况
if (!state) $scope.list = []; //如果是第一次请求则置空数据数组
$scope.list = $scope.list.concat(res.data.data); //如果是上拉加载请求,则拼接之前的数据
}
});
}
上拉加载更多的触发:
$scope.loadMore = function () {
scope.pages.current++;
if ($scope.pages.current <= $scope.pages.numTotal) { //判断当前页数是否是最后一页
$scope.getList(true)
} else {
console.log('到底了');
}
};
个人观点,如有不当之处,还请各位大神指点!