uni-app实现下拉刷新

业务逻辑如下:

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

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

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

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

完整代码如下:

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

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

相关推荐
西洼工作室15 小时前
UniApp云开发笔记
前端·笔记·uni-app
Martin -Tang15 小时前
uniapp 实现录音操作,长按录音,放开取消
前端·javascript·vue.js·uni-app·css3·录音
西洼工作室19 小时前
UniApp开发全攻略:从生命周期到路由传值
前端·javascript·uni-app
Martin -Tang2 天前
uniapp+vue3+ts自定义表格
javascript·vue.js·uni-app
LinMin_Rik3 天前
解决win11专业版HbuilderX编译vue3的uniappX失败问题
uni-app
游戏开发爱好者83 天前
iOS应用性能监控:Pre-Main与Main函数耗时分析及Time Profiler使用教程
android·ios·小程序·https·uni-app·iphone·webview
西洼工作室3 天前
个人开发者接入阿里云号码认证服务AliCloud-NirvanaPns实现一键登录
python·阿里云·uni-app·全栈·认证授权
2501_916008894 天前
ChatGPT前端开发学习指南:Visual Studio Code与谷歌浏览器安装配置详解
ide·vscode·ios·小程序·uni-app·编辑器·iphone
2501_915909064 天前
完整指南:如何将iOS应用上架到App Store
android·ios·小程序·https·uni-app·iphone·webview
xiangxiongfly9155 天前
uni-app 组件总结
前端·javascript·uni-app