uni-app实现下拉刷新

业务逻辑如下:

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

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

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

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

完整代码如下:

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

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

相关推荐
脾气有点小暴3 小时前
uniapp开发APP 内嵌外部 HTTPS 链接的实现方案
vue.js·uni-app
硕子鸽10 小时前
UniApp + Dify 实战:详解 SSE 流式响应的解析与前端渲染
前端·uni-app·dify
2501_9159184110 小时前
iOS 项目中证书管理常见的协作问题
android·ios·小程序·https·uni-app·iphone·webview
Miketutu10 小时前
[特殊字符] uni-app App 端实现文件上传功能(基于 xe-upload 插件)
前端·vue.js·uni-app
焚 城10 小时前
uniapp 各种文件预览实现
vue.js·uni-app·html
weixin79893765432...10 小时前
uni-app 全面深入的解读
uni-app
2501_9159184110 小时前
提升 iOS 应用安全审核通过率的一种思路,把容易被拒的点先处理
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张11 小时前
APP如何快速上架Apple Store:完整上架流程与常见问题解析
android·小程序·https·uni-app·iphone·webview
ifeng091811 小时前
uniapp开发鸿蒙:跨端兼容与条件编译实战
华为·uni-app·harmonyos
ifeng091811 小时前
uniapp开发鸿蒙:常见问题与踩坑指南
华为·uni-app·harmonyos