uni-app实现下拉刷新

业务逻辑如下:

1.在滚动容器中加入refresher-enabled属性,表示为开启下拉刷新

2.监听事件,添加refresherrefresh事件

3.在事件监听函数中加载数据

4.关闭动画,添加refresher-triggered属性,在数据请求前开启刷新动画,在数据请求完成后关闭动画。

完整代码如下:

注意:如果不用await直接调接口,会导致数据加载顺序不确定,可能数据还没返回完就已经关闭动画。如果三个接口都加上await,则会等待第一个接口返回后再执行第二个接口,以此类推,延长了数据加载时间。

最优方案:用Promise.all()方法同时加载三个接口,配合async await,这样可以保证三个接口都返回后再执行下一步操作。

相关推荐
2501_916007473 小时前
iOS性能调试工具终极指南,从系统底层到多端协同的全方位优化实践(2025版)
android·ios·小程序·https·uni-app·iphone·webview
2501_915921433 小时前
iOS崩溃日志深度分析与工具组合实战,从符号化到自动化诊断的完整体系
android·ios·小程序·uni-app·自动化·cocoa·iphone
2501_9160088911 小时前
没有源码如何加密 IPA 实战流程与多工具组合落地指南
android·ios·小程序·https·uni-app·iphone·webview
LXA080912 小时前
UniApp 小程序中使用地图组件
小程序·uni-app·notepad++
QuantumLeap丶14 小时前
《uni-app跨平台开发完全指南》- 07 - 数据绑定与事件处理
vue.js·ios·uni-app
2501_9159090619 小时前
Flutter 应用怎么加固,多工具组合的工程化实战(Flutter 加固/Dart 混淆/IPA 成品加固/Ipa Guard + CI)
android·flutter·ios·ci/cd·小程序·uni-app·iphone
xiaaaa.z21 小时前
macos HbuildX 使用cli脚本创建uniapp 运行时报错“cli项目运行依赖本地的Nodejs环境,请先安装并配置到系统环境变量后重试。”
macos·uni-app
2501_915909061 天前
深入理解HTTPS和HTTP的区别、工作原理及安全重要性
安全·http·ios·小程序·https·uni-app·iphone
Q_Q5110082852 天前
python+uniapp基于微信小程序的垃圾分类信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
你的眼睛會笑2 天前
uniapp 鸿蒙元服务 真机调试流程指南
华为·uni-app·harmonyos