uniapp 下拉刷新、上拉加载更多、最常见的节流场景

走向大前端

已于 2022-11-01 15:12:53 修改

阅读量1.6k

点赞数 2

文章标签：前端

于 2022-03-16 18:18:36 首次发布

本文链接：https://blog.csdn.net/abs_botton/article/details/123532632

版权

本文介绍了如何在uni-app中配置页面以启用下拉刷新和上拉加载更多功能。通过修改pages.json文件，添加相应的配置项，并在页面中定义onPullDownRefresh和onReachBottom函数，实现了数据的刷新和分页加载。同时，讲解了如何避免数据已全部加载时仍触发上拉加载的处理方式。

摘要由CSDN通过智能技术生成

首先在pages.josn文件内的pages数组中找到你向加下拉刷新的页面。

找到后添加：

 {
			"path": "pages/equipment/equipment",
			"style": {
				"navigationBarTitleText": "设备",
				"enablePullDownRefresh": true, //开启下拉刷新
				"onReachBottomDistance": 50
     //开始上拉加载更多，设置底部的触发距离，现在属性值是50就是距离底部50px时触发上拉回调
			}

在设备页面与data平级添加函数如下：

        onPullDownRefresh() {
            //下拉刷新
			uni.$u.toast("去调用接口,完成刷新操作")
			//调用接口完成后添加下方函数,停止当前页面下拉刷新。
            uni.stopPullDownRefresh()
		},
		onReachBottom() {
			//这是上拉触发的函数.一般在这里进行分页操作. 
            /*会有一种情况就是当数据已经全部加载完成了,再次触底还会调用接口,
              这时就需要去记录一下是否已经全部加载完毕,加载完毕就不去请求接口了.
              这时最常见的节流场景*/
		},