小程序uni中分页咋写(触底加载,分页加载,下拉加载,上拉加载)

我最近写小程序需要处理分页加载之类的把代码优化了一下更清晰,这是自己优化后的把逻辑集中在了方法里面 onReachBottom生命周期里只负责调用

另外也可用于搜索之类的  简简单单三段代码 嘿嘿上代码

data中数据

recordPage: {
					page: 1,//页码
					limit: 10,//每页条数  不用可以去掉
					key: true,//请求开关
					m: '',//搜索条件  不用可以去掉
				},

然后是小程序的生命周期函数

onReachBottom() {
			this.getRecordList()
		},

最后methods

async getRecordList() {
				if (!this.recordPage.key) return
				this.recordPage.key = false//开始请求后关闭开关
				const res = await this.$tokenRequest.post(this.pagesConfig.url, {
					page: this.recordPage.page,
					limit: this.recordPage.limit,
					m: this.recordPage.m,
					type: this.type,
				})

				if (res.list?.length > 0) {
					if (this.recordPage.page == 1) {
						this.recordData = res.list
					} else {
						this.recordData = [...this.recordData, ...res.list]
					}
					this.recordPage.page++//只要有数据页码就++
					this.recordPage.key = true
				} else {
					if(this.recordPage.page == 1) {
						this.recordData = res.list
					}
				}
			},