uni-app实现下拉刷新

业务逻辑如下:

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

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

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

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

完整代码如下:

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

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

相关推荐
Rysxt_5 小时前
UniApp五大UI框架与uni-ui核心区别对比
uni-app·uni-ui
2501_915918416 小时前
HTTPS 代理失效,启用双向认证(mTLS)的 iOS 应用网络怎么抓包调试
android·网络·ios·小程序·https·uni-app·iphone
2501_915106328 小时前
混合应用(Hybrid)安全加固,不依赖源码对成品 IPA 混淆
android·安全·小程序·https·uni-app·iphone·webview
00后程序员张9 小时前
无需越狱,来对 iOS 设备进行调试、管理与分析
android·ios·小程序·https·uni-app·iphone·webview
芒果大胖砸9 小时前
uniapp当中如何实现长按复制功能并且能够自由选择内容
开发语言·javascript·uni-app
00后程序员张9 小时前
在 iOS 上架中如何批量方便快捷管理 Bundle ID
android·ios·小程序·https·uni-app·iphone·webview
换日线°10 小时前
uni-app对接腾讯即时通讯 IM
前端·uni-app
咚咚?10 小时前
uniapp [JS Framework] 当前运行的基座不包含原生插件[xxxx],请在manifest中配置该插件,重新制作包括该原生插件的自定义运行基座
开发语言·javascript·uni-app
木子啊10 小时前
Uni-app生命周期:执行顺序与避坑指南
前端·javascript·uni-app
快起来搬砖了10 小时前
UniApp 全端兼容 OSS 视频上传实现方案
小程序·uni-app·app·h5·文件上传·oss文件上传