一个简单的vue底部加载更多数据

在外层div中绑定方法

<div class="start" @scroll.passive="getScroll($event)">

首先vue当前组件加载的时候初始化数据

data() {
		return {
			initData: [],//数据
            limit:14,//一页多少个
            offset:1,//第几页
            count:0,//记录数
		};
	},
created(){
			this.initDataFns();
}，methods:{
    initDataFns(){
			//提现记录
			let offset=(this.offset-1)*this.limit;
			let limit=this.limit;
			withdrawalsRecord(limit,offset).then(res => {
				this.initData = res.rows;
				this.count=res.total;//count 一共多少条记录
			});
		}
}

当滚动距离小于等于0的时候继续调用方法

    getScroll(event) {
				// 滚动条距离底部的距离scrollBottom
				let limit=this.limit;
				let withdraw=this.$route.query.withdraw;
                let scrollBottom =
                    event.target.scrollHeight -
                    event.target.scrollTop -
                    event.target.clientHeight;
                        if(scrollBottom<=0&&this.count>this.initData.length){//当未加载完所有记录时候
                            this.offset++;
                            let offset=(this.offset-1)*this.limit;
                            withdrawalsRecord(limit,offset).then(ret => {
								for(let item of ret.rows){
									this.initData.push(item);//把下一页加载的追加到当前数据上
								}
                            })
                        }
                                  
            }