uni-app实现下拉刷新

业务逻辑如下:

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

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

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

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

完整代码如下:

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

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

相关推荐
PedroQue994 小时前
v2.6.0 新增全局返回守卫与 iOS 侧滑拦截,补齐跨端路由拦截能力
前端·uni-app
蜡台11 小时前
Uniapp 开发H5 页面跳转拦截
前端·javascript·uni-app
宠友信息1 天前
内容社区源码开发实践解析,用Spring Boot打造1:1仿小红书源码平台
java·spring boot·redis·websocket·mysql·spring·uni-app
梦曦i1 天前
Vue-Router 2.4.0 新增可控重定向功能
前端·uni-app
郑州光合科技余经理1 天前
海外版外卖系统架构:订单怎么流转、权限怎么分
java·开发语言·前端·系统架构·uni-app·php·ai编程
qq_316837751 天前
uniapp 安卓/H5 使用 contentEditable 属性 富文本编辑器
android·javascript·uni-app
小满zs2 天前
关于HBuilderX+ 微信小程序开发工具启动的问题
前端·uni-app
sunphp开发者2 天前
制作手绘地图瓦片切图
前端·uni-app
梦曦i3 天前
RouterLink v2.5.0:H5端原生能力全面回归
前端·uni-app
码农刚子3 天前
用 .NET 8 + uni-app 做一套多租户畜牧 SaaS:我们在秦巴牧云踩过的 6 个坑
uni-app·.net·saas