uniapp 触底分页代码

uniapp 触底分页代码，用的vue2

data中：

// 分页参数
params: {
	pageNum: 1,
	pageSize: 20
},
// 是否加载下一页
flag: false,
// 数据列表
dataList: []

onReachBottom： 和 onLoad，methods，data同级

onLoad() {
	this.getAllProduct();
},
onReachBottom() {
	const that = this;
	if(that.flag){
		return
	}
	that.params.pageNum += 1;
	// 获取数据的方法
	this.getAllProduct();
},

方法：

getAllProduct(){
	const that = this;
	//  访问后台的方法  我返回的数据结构是
	// {code: 200, rows: [{},{},{}], total: 21434 }
	getProductPage(that.params).then(res => {
		const currentPageData = res.rows;
		this.dataList = [...this.dataList, ...currentPageData];
		const totalObj = res.total;
		
		if (this.dataList.length >= totalObj) {
			this.flag = true;
			console.log("所有数据已加载完毕");
		} else {
			this.flag = false;
		}
	})
},

可以在pages.json中配置，距离底部多远就可以触发, 不配也行默认为0。

{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				//  就是这一句
				"onReachBottomDistance": 70
			}
		},

--------------以上---------------