uniapp的下拉刷新

luobinzi

已于 2022-11-10 13:49:38 修改

阅读量467

点赞数

分类专栏：笔记文章标签：前端

于 2022-10-31 21:19:11 首次发布

本文链接：https://blog.csdn.net/m0_63250938/article/details/127623530

版权

笔记专栏收录该内容

16 篇文章 2 订阅

订阅专栏

场景：类似微信聊天窗口的下拉刷新聊天内容

解决：

直接在pages,json文件的对应节点中将enablePullDownRefresh设置为true，便可开启下拉刷新。

"page":[
 {
			"path": "pages/classify/classify",
			"style": {
				"navigationBarTitleText": "分类",
				//开启下拉刷新
				"enablePullDownRefresh":true,
				//页面上拉触底事件触发时距页面底部距离，单位只支持px
				"onReachBottomDistance":100
			}
	}]

在页面文件中，通过onPullDownRefresh()监听下拉刷新的动作。

注：onPullDownRefresh（）与onLoad同级。

可以用uni.stopPullDownRefresh();关闭下拉刷新

	//监听下拉刷新
		onPullDownRefresh() {
			console.log('触发下拉刷新');
			setTimeout(()=>{
				this.list=[...this.list,...[11,22,33,332]];
				
				//关闭下拉刷新
				uni.stopPullDownRefresh();
			},1000)
		},