uni-app实现下拉刷新

业务逻辑如下:

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

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

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

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

完整代码如下:

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

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

相关推荐
予你@。1 天前
uni-app(Vue3)实现自定义 Tab 切换滑块效果(微信小程序)
vue.js·微信小程序·uni-app
HashTang2 天前
【AI 编程实战】第 11 篇:让小程序飞起来 - 性能优化实战指南
前端·uni-app·ai编程
lruri2 天前
记录一个修复nvue文件在vscode里面提示ts-plugin报错
uni-app
蓝帆傲亦2 天前
Web前端Mock数据实战指南:正确使用Mock.js提升开发效率
微信小程序·小程序·uni-app
00后程序员张2 天前
iOS 应用代码混淆,对已编译 IPA 进行类与方法混淆
android·ios·小程序·https·uni-app·iphone·webview
木子啊2 天前
Uni-app社会化功能:登录支付分享全攻略
uni-app
笨笨狗吞噬者3 天前
【2025】加入 uniapp 的一年
前端·uni-app
2501_915918413 天前
mobileprovision 描述文件内容查看,查看 Bundle ID、证书指纹等来定位安装与签名问题
android·ios·小程序·https·uni-app·iphone·webview
2501_915918413 天前
HTTPS 端口解析,除了 443 端口还有哪些
android·ios·小程序·https·uni-app·iphone·webview
三十_3 天前
uniApp WebView 动态配置加载状态监控与容错方案
前端·uni-app