先在pages.json中将需要添加上拉刷新或下拉加载的页面添加如下代码:

“enablePullDownRefresh”:true //开启下拉刷新

项目结构:

"pages": [{
		"path": "pages/search/search",
		"style": {
			"navigationBarTitleText": "uni-ui基础项目",
			"h5":{
				"titleNView":false
			},
			"enablePullDownRefresh":true		//开启下拉刷新
		}
	} ]

使用:

		//定义两个全局变量
		var timerUpId,timerDownId;
		/***部分代码****/
		onPullDownRefresh() { //触发上拉刷新函数
			if (timerUpId != null) { //为防止回弹多次触发刷新
				clearTimeout(timerUpId)
			}
			timerUpId = setTimeout(() => {
				console.log("下拉刷新");
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 1000)
		},
		onReachBottom() { //监听页面触底函数
			if (timerDownId != null) { //为防止回弹多次触发刷新
				clearTimeout(timerDownId)
			}
			timerDownId = setTimeout(() => {
				console.log("上拉加载");
			}, 500)

		},
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐