Angular2+：上拉加载更多

无论是微信小程序还是其他前端框架，都会遇到上拉加载（懒加载）和下拉刷新这种问题。其实理清楚什么时候请求数据、请求返回的几种情况，那么做这个懒加载就很简单了。

一、首先，固定一个包含列表数据的div高度，让它里面列表的数据溢出可以滚动：

    
{{item}}

二、那么列表的数据请求就会分成两种情况：一种是初始化页面加载的第一页的数据；一种是滚动到底部请求的下一页的数据。所以我们在请求时要分成两种情况，若是第一页，isPage=false，下一页的数据isPage=true：

getData(isPage){
        console.log("需要拼接数据：",isPage);
        let params = {
            pageNum: this.pageNo,
            pageSize: 10
        }
        //请求
        this.service.pageData(path).then(res=>{
            if(isPage){
                //下一页的数据拼接在原有数据后面
                this.listData = this.listData.concat(res.result);
            }else{
                //第一页数据直接赋值
                this.listData = res.result;
            }
        })
    }

三、步骤一提到的固定高度的div，它在往上滚动的时候，滚动到一定的位置便请求下一页的数据。我这里设置了当div距离到底部还有100px时，触发请求下一页的数据：

scrollBottom(e){
        let offsetH = e.target.offsetHeight;
        let scrollT = e.target.scrollTop;
        let height = e.target.scrollHeight;
        //div 距离底部 = 列表的总高度 -（滚动的距离 + 窗口可视高度）
        let bottom = height - (scrollT + offsetH);
        // console.log(offsetH,scrollT,height,bottom);
        if(bottom < 100){
            this.pageNo = this.pageNo + 1;
            this.getData(true);
        }
    }

四、以上便是基本的上拉加载。通过以上步骤会出现几个问题，下面提供解决方法：

1、滚动离底部<100px之后，继续往底部滚动会一直发起请求。我们需要在div距离到底部还有100px时,设置一个全局变量getBottom，告诉大家我已经发起请求了，等我请求返回的数据展示到页面之后才可以再次发起请求。将步骤三的代码改成以下：

//列表滚动
    scrollBottom(e){
        let offsetH = e.target.offsetHeight;
        let scrollT = e.target.scrollTop;
        let height = e.target.scrollHeight;
        //div 距离底部 = 列表的总高度 -（滚动的距离 + 窗口可视高度）
        let bottom = height - (scrollT + offsetH);
        // console.log(offsetH,scrollT,height,bottom);
        if(bottom < 100 && !this.getBottom){
            this.getBottom = true;
            this.pageNo = this.pageNo + 1;
            this.getData(true);
        }
    }

步骤二的代码改为：

getData(isPage){
        console.log("需要拼接数据：",isPage);
        var params = {
            pageNum: this.pageNo,
            pageSize: 5
        }
        //请求
        this.service.pageData(path).then(res=>{
            //请求返回数据后
            this.getBottom = false;
            if(isPage){
                //下一页的数据拼接在原有数据后面
                this.listData = this.listData.concat(res.result);
            }else{
                //第一页数据直接赋值
                this.listData = res.result;
            }
        })
    }

2、如果最后一页的数据都请求完了，再继续往下滚动还会发起请求。设置一个全局变量noMore，当我请求返回的数组长度为0时，滚动到底部就不用再发起请求了。将步骤三的代码改成以下：

//列表滚动
    scrollBottom(e){
        let offsetH = e.target.offsetHeight;
        let scrollT = e.target.scrollTop;
        let height = e.target.scrollHeight;
        //div 距离底部 = 列表的总高度 -（滚动的距离 + 窗口可视高度）
        let bottom = height - (scrollT + offsetH);
        // console.log(offsetH,scrollT,height,bottom);
        if(bottom < 100 && !this.getBottom && !this.noMore){
            this.getBottom = true;
            this.pageNo = this.pageNo + 1;
            this.getData(true);
        }
    }

步骤二的代码改为：

getData(isPage){
        console.log("需要拼接数据：",isPage);
        var params = {
            pageNum: this.pageNo,
            pageSize: 5
        }
        //请求
        this.service.pageData(path).then(res=>{
            //请求返回数据后
            this.getBottom = false;
            if(isPage){
                //下一页的数据拼接在原有数据后面
                this.listData = this.listData.concat(res.result);
            }else{
                //第一页数据直接赋值
                this.listData = res.result;
            }
            //如果返回的数据为空，那么就没有下一页了
            if( res.result.length == 0){
                this.noMore = true;
            }
        })
    }

五、我们接下来完善请求失败的情况，步骤二的代码改为：

getData(isPage){
        console.log("需要拼接数据：",isPage);
        var params = {
            pageNum: this.pageNo,
            pageSize: 5
        }
        //请求
        this.service.pageData(path).then(res=>{
            //请求返回数据后
            this.getBottom = false;
            if(res.status == 'SUCCESS'){
                if(isPage){
                    //下一页的数据拼接在原有数据后面
                    this.listData = this.listData.concat(res.result);
                }else{
                    //第一页数据直接赋值
                    this.listData = res.result;
                }
                //如果返回的数据为空，那么就没有下一页了
                if(res.result == undefined || res.result.length == 0){
                    this.noMore = true;
                }
                return;
            }
            //返回失败
            this.loadingFailed = true;
        },err=>{
            this.loadingFailed = true;
        })
    }

步骤一的HTML代码修改如下：

    
{{item}}
    
加载中...
    
没有更多数据了
    
数据加载失败,请重试