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

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

刷新:

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 接口调用结束的回调函数(调用成功、失败都会执行)
相关推荐
被遗忘的旋律.9 分钟前
Linux驱动开发笔记(十三)——platform设备驱动
linux·驱动开发·笔记
nnerddboy12 分钟前
QT(c++)开发自学笔记:4.Qt 3D简易实现
笔记
一只程序熊39 分钟前
uniapp引入uniim后聊天列表无法加载出来
uni-app
九年义务漏网鲨鱼1 小时前
从零学习 Agentic RL(四)—— 超越 ReAct 的线性束缚:深入解析 Tree-of-Thoughts (ToT)
前端·学习·react.js
wan5555cn2 小时前
中国启用WPS格式进行国际交流:政策分析与影响评估
数据库·人工智能·笔记·深度学习·算法·wps
代码哈士奇2 小时前
无界微前端学习和使用
前端·学习
终焉代码3 小时前
【C++】C++11特性学习(1)——列表初始化 | 右值引用与移动语义
c语言·c++·学习·1024程序员节
爱做ppt的阿伟3 小时前
油猴脚本学习1——元数据头部
学习
半夏知半秋3 小时前
redis-哨兵模式配置整理
数据库·redis·笔记·后端·学习·lua·安全架构
草莓熊Lotso3 小时前
模板进阶:从非类型参数到分离编译,吃透 C++ 泛型编程的核心逻辑
linux·服务器·开发语言·c++·人工智能·笔记·后端