上拉加载更多

2019-06-11 17:49:47 阅读：159 来源： 互联网

在开发中，不管是移动端还是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('到底了');
    }
};

个人观点，如有不当之处，还请各位大神指点！

标签：res,上拉,scope,data,pages,加载
来源： https://blog.csdn.net/Kreme/article/details/91450750

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

上拉加载更多