2024年HarmonyOS鸿蒙最新uniapp滚动加载下拉刷新_uniapp下拉加载(1)，吃透这份HarmonyOS鸿蒙高级工程师面试497题解析

本文链接：https://blog.csdn.net/2401_84853048/article/details/138831536

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

在这里插入图片描述

一、滚动加载

滚动加载指的是当用户滑动页面到底部时，自动加载更多数据。在uniapp中，我们可以通过监onReachBottom来实现滚动加载。

onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
onReachBottom使用注意可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

具体实现步骤如下：

声明submitDate对象用来存放接口需要的具体参数，其中page和limit为查询页数和每页查询数据，total为记录数据总条数,pageList存放页面数据。

       data() {
			return {
			    pageList:[],//列表数据
				submitDate: {
					//放你自己的参数
					startDate: '',
					endDate: '',
					page: 1,//页数
					limit: 20//每页条数
				},
				total: 0,//数据总条数
			}
		},

封装数据请求函数

每发起一次请求把获取的数据push到pageList里。

getdata(){
 uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data:this.submitDate,
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => { 
       this.pageList.push(res.data.list); //具体根据你接口返回数据修改
       this.total = res.total;//数据总条数
    }
 });
}

在onReachBottom生命周期里封装具体加载逻辑
① 判断页面数据dataList的长度，如果长度小于total 则继续把数据push到dataList，如果长度大于或者等于total ，则说明已经加载了全部数据，此处提醒用户数据加载完成
② 为了避免数据重复，每滚动到底部一次，在需要请求下一页数据之前，submitDate里page需要加1，即that.submitDate.page++;
如果需要加载框的话，可以在getdata里使用uni.showLoading({title:'加载中...'}),然后在success回调里隐藏加载框 uni.hideLoading()

showLoading参数说明

在这里插入图片描述

       onReachBottom() {
			let that = this
			if (that.total <= that.dataList.length) {
				uni.showToast({
					title: '已加载全部数据',
					icon: "none"
				});
			} else {
				that.submitDate.page++;
				that.getData()
			}
		},