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 接口调用结束的回调函数(调用成功、失败都会执行)
相关推荐
freexyn7 分钟前
Matlab自学笔记六十一:快速上手解方程
数据结构·笔记·matlab
ytttr8732 小时前
matlab通过Q学习算法解决房间路径规划问题
学习·算法·matlab
寻丶幽风3 小时前
论文阅读笔记——NoPoSplat
论文阅读·笔记·三维重建·3dgs·相机位姿·dustr
牧杉-惊蛰3 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
听风ツ5 小时前
固高运动控制
学习
西岭千秋雪_5 小时前
Redis缓存架构实战
java·redis·笔记·学习·缓存·架构
XvnNing5 小时前
【Verilog硬件语言学习笔记4】FPGA串口通信
笔记·学习·fpga开发
海棠蚀omo5 小时前
C++笔记-位图和布隆过滤器
开发语言·c++·笔记
大胡子大叔6 小时前
webrtc-streamer视频流播放(rstp协议h264笔记)
笔记·webrtc·rtsp·webrtc-streamer
牛奶咖啡136 小时前
学习设计模式《十六》——策略模式
学习·设计模式·策略模式·认识策略模式·策略模式的优缺点·何时选用策略模式·策略模式的使用示例