当前位置: 首页 > java >正文

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

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

刷新:

HTML部分代码:

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

JS部分代码:

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参数说明

参数名类型必填说明
scrollTopNumber滚动到页面的目标位置(单位px)
selectorString元素选择器,用于指定要滚动到的元素位置,App、H5、微信小程序2.7.3+ 、支付宝小程序1.20.0+支持
durationNumber滚动动画的时长,默认300ms,单位 ms
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)
http://www.xdnf.cn/news/12918.html

相关文章:

  • llama-factory微调大模型环境配置避坑总结
  • Python应用输入输出函数
  • 曼昆《经济学原理》第九版 第十章外部性
  • 机器学习笔记【Week8】
  • Android中ContentProvider细节
  • 37 C 语言字符串基础操作函数详解:strlen、strcpy、strncpy、strcat、strncat、strcmp、strncmp
  • 视频质量测试点
  • 本地部署drawDB结合内网穿透技术实现数据库远程管控方案
  • MySQL 知识小结(一)
  • 基于双向链表实现多级菜单界面设计框架
  • 【C++】红黑树的实现详解
  • 华为云Flexus+DeepSeek征文 | MaaS平台避坑指南:DeepSeek商用服务开通与成本控制
  • UE5 音效系统
  • Python 高级应用10:在python 大型项目中 FastAPI 和 Django 的相互配合
  • Docker简述
  • C++实现分布式网络通信框架RPC(2)——rpc发布端
  • 图解C#教程 第五版 第4章 类型、存储和变量 笔记
  • 自动化测试系列 —— UI自动化测试
  • 如何将数据从 iPhone 传输到 Android?
  • 第三章 k近邻法
  • shell脚本质数判断
  • 实现弹窗随键盘上移居中
  • 分布式增量爬虫实现方案
  • C语言中的段错误(Segmentation Fault):底层原理及解决方法
  • python打卡训练营打卡记录day49
  • TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
  • WinPE动态配置优化方案
  • C++11 constexpr和字面类型:从入门到精通
  • 2025年登高架设作业考试题库精选
  • ThinkPHP8中使用QueryList---QueryList 简洁、优雅、可扩展的PHP采集工具(爬虫)