uni-app学习笔记三十四--刷新和回到顶部的实现

moxiaoran57532025-06-10 20:58

在移动端开发中，刷新和回到顶部也是很常见的使用场景。下面说下实现方式：

刷新：

HTML部分代码：

html 复制代码

<view class="float">
	<view class="item" @click="onRefresh">
		刷新
	</view>
	<view class="item" @click="toTop">
		顶部
	</view>
</view>

JS部分代码：

javascript 复制代码

function onRefresh(){
	console.log("刷新...")
	uni.startPullDownRefresh()
}
function toTop(){
	console.log("返回顶部...")
	uni.pageScrollTo({
		scrollTop:0,
		duration:100
	})
}

scrollTop:0回到页面最顶部

duration:100多久从当前区域回到顶部，值越小，返回到顶部就越快，设为100是个比较合理的值。

回到顶部更多参数详见uniapp官网：uni.pageScrollTo(OBJECT) | uni-app官网

OBJECT参数说明

参数名	类型	必填	说明
scrollTop	Number	否	滚动到页面的目标位置（单位px）
selector	String	否	元素选择器，用于指定要滚动到的元素位置，App、H5、微信小程序2.7.3+ 、支付宝小程序1.20.0+支持
duration	Number	否	滚动动画的时长，默认300ms，单位 ms
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）