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 接口调用结束的回调函数(调用成功、失败都会执行)
相关推荐
_Kayo_23 分钟前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
chenchihwen39 分钟前
大模型应用班-第2课 DeepSeek使用与提示词工程课程重点 学习ollama 安装 用deepseek-r1:1.5b 分析PDF 内容
人工智能·学习
陈不知代码1 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
源码_V_saaskw1 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
超浪的晨1 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
使二颗心免于哀伤3 小时前
《设计模式之禅》笔记摘录 - 10.装饰模式
笔记·设计模式
悠哉悠哉愿意3 小时前
【电赛学习笔记】MaxiCAM 项目实践——与单片机的串口通信
笔记·python·单片机·嵌入式硬件·学习·视觉检测
快乐肚皮3 小时前
ZooKeeper学习专栏(五):Java客户端开发(原生API)详解
学习·zookeeper·java-zookeeper
慕y2743 小时前
Java学习第七十二部分——Zookeeper
java·学习·java-zookeeper
岩中竹4 小时前
广东省省考备考——常识:科技常识(持续更新)
笔记