uni-app实现下拉刷新

业务逻辑如下:

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

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

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

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

完整代码如下:

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

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

相关推荐
怀君12 小时前
Uniapp——开发Android插件教程
android·uni-app
2501_9159214318 小时前
混合开发应用安全方案,在多技术栈融合下构建可持续、可回滚的保护体系
android·安全·ios·小程序·uni-app·iphone·webview
q_191328469518 小时前
基于SpringBoot2+Vue2+uniapp的考研社区论坛网站及小程序
java·vue.js·spring boot·后端·小程序·uni-app·毕业设计
2501_9151063219 小时前
Charles抓包怎么用 Charles抓包工具详细教程、网络调试方法、HTTPS配置与手机抓包实战
网络·ios·智能手机·小程序·https·uni-app·webview
apollo_qwe19 小时前
基于 uView 的 u-picker 自定义时分秒选择器实现(支持反显)
uni-app
00后程序员张20 小时前
Fastlane 结合 开心上架,构建跨平台可发布的 iOS 自动化流水线实践
android·运维·ios·小程序·uni-app·自动化·iphone
游戏开发爱好者820 小时前
iOS 性能测试的工程化方法,构建从底层诊断到真机监控的多工具测试体系
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088920 小时前
iOS App 混淆的真实世界指南,从构建到成品 IPA 的安全链路重塑
android·安全·ios·小程序·uni-app·cocoa·iphone
一路向前的月光21 小时前
Uniapp实现钉钉小程序前期基础配置
uni-app·钉钉
2501_9151063221 小时前
iPhone 耗电异常全面诊断指南,构建多工具协同的电量分析与优化体系
android·ios·小程序·https·uni-app·iphone·webview