uni-app实现下拉刷新

业务逻辑如下:

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

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

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

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

完整代码如下:

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

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

相关推荐
2501_915106321 小时前
全面理解 iOS 帧率,构建从渲染到系统行为的多工具协同流畅度分析体系
android·ios·小程序·https·uni-app·iphone·webview
2501_916008893 小时前
iOS 能耗检测的工程化方法,构建多工具协同的电量分析与性能能效体系
android·ios·小程序·https·uni-app·iphone·webview
济南壹软网络科技有限公司3 小时前
综合社交服务平台的技术架构与实践:构建高可用、多端覆盖的互动生态
uni-app·php·开源源码·陪玩陪聊h5
2501_915921434 小时前
重新理解 iOS 的 Bundle Id 从创建、管理到协作的工程策略
android·ios·小程序·https·uni-app·iphone·webview
2501_915106324 小时前
当 altool 退出历史舞台,iOS 上传链路的演变与替代方案的工程实践
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张4 小时前
Transporter 的局限与替代路径,iOS 上传流程在多平台团队中的演进
android·ios·小程序·https·uni-app·iphone·webview
lwprain5 小时前
uniapp使用uniview-plus性能问题处理
uni-app
00后程序员张5 小时前
Python 抓包工具全面解析,从网络监听、协议解析到底层数据流捕获的多层调试方案
开发语言·网络·python·ios·小程序·uni-app·iphone
AH_HH6 小时前
UniApp H5 代理失效的终极替代方案
uni-app
不努力code6 小时前
uniapp浮动面板-movable-area
前端·javascript·uni-app