上拉加载更多

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值