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

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

找到后添加:

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

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

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

你可能感兴趣的:(前端)