vue实现上拉加载，无限加载

实现原理就是页面触底就加载数据，concat新旧数据
html代码

 <div ref="viewbox" @scroll="scroll"></div>

js代码

onloading: any = false; // 防止过快滑动，设置1秒请求，防呆处理
loadover: any = true; // 没有可加载数据
pram: any = {
    page: 1,
    per_page: 10 // 每页10条
};
scroll() {
    let box: any = this.$refs.viewbox;
    let scrollTop = box.scrollTop; // 滚动位置
    let scrollHeight = box.scrollHeight; // div总高度
    let clientHeight = box.clientHeight; // 可视高度
    // 判定元素是否滚动到底：
    // element.scrollHeight - element.scrollTop === element.clientHeight
    if (!this.onloading && this.loadover) {
        // -100提升滑动平滑度
        if (scrollTop >= scrollHeight - clientHeight - 100) {
            this.onloading = true;
            setTimeout(() => {
                let page = this.pram.page;
                page += 1;
                this.pram.page = page;
                this.getGoodsList(page);
                this.onloading = false;
            }, 1000);
        }
    }
}

// 获得商品列表
getGoodsList(page) {
    let pram: any = {
        'page': page,
        'per_page': this.pram.per_page,
    };
    this.mixGet('url', pram).then(res => {
        this.goodslist = this.goodslist.concat(res.data.data);
        if (res.data.data.length <= 0) { // 没有数据
            this.loadover = false;
        }
    });
}

记住判定元素是否滚动到底：
element.scrollHeight - element.scrollTop === element.clientHeight