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 接口调用结束的回调函数(调用成功、失败都会执行)
相关推荐
闲蛋小超人笑嘻嘻12 分钟前
find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器
前端·javascript·uni-app
聪明的笨猪猪1 小时前
Java 集合 “Map(1)”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
2501_916007471 小时前
前端开发工具都有哪些?常用前端开发工具清单与场景化推荐
android·ios·小程序·https·uni-app·iphone·webview
red_redemption1 小时前
自由学习记录(104)
学习
张书名1 小时前
《强化学习数学原理》学习笔记3——贝尔曼方程核心概念梳理
笔记·学习·算法
范纹杉想快点毕业1 小时前
ZYNQ7045芯片中UART实现RS422通信详解,50000字解析,C语言,嵌入式开发,软件开发
c语言·笔记·stm32·单片机·嵌入式硬件·mcu·fpga开发
71-32 小时前
C语言速成秘籍——跳转语句(goto)
c语言·笔记·学习·其他
蓝桉_An3 小时前
CNN基础学习(自用)
神经网络·学习
huangql5203 小时前
基于前端+Node.js 的 Markdown 笔记 PDF 导出系统完整实战
前端·笔记·node.js
Han.miracle4 小时前
数据结构——二叉树学习
数据结构·学习