当前位置: 首页 > news >正文

uni-app实现下拉刷新

业务逻辑如下:

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

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

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

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

完整代码如下:

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

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

http://www.lryc.cn/news/336801.html

相关文章:

  • vue ts 应用梳理
  • CUDA12.4文档-全文翻译
  • 【C 数据结构】循环链表
  • Python列表
  • 谈谈系列之金融直播展业畅想
  • 【C 数据结构】双向链表
  • Leetcode刷题之消失的数字(C语言版)
  • LeetCode654:最大二叉树
  • AI禁区徘徊监测识别摄像机
  • 【学习】什么是信创适配性测试?信创适配性测试的重要性有哪些?
  • linux 配置服务开机启动
  • React中State管理的4 个关键解决方案
  • Testng测试框架(6)--@Factory动态地创建测试类的实例
  • Kubernetes(K8s)运维实战:案例解析与代码实践
  • nginx反向代理配置详解
  • 【LeetCode】单调栈类题目详解
  • Python上解决TypeError: not all arguments converted during string formatting错误
  • ASUS华硕ROG幻16Air笔记本电脑GU605M原装出厂Win11系统工厂包下载,带有ASUSRecovery一键重置还原
  • 【OpenVINO™】使用 OpenVINO™ C# API 部署 YOLOv9 目标检测和实例分割模型(上篇)
  • 代码随想录——二分查找(一)
  • 【NLP】多标签分类【下】
  • HWOD:密码强度等级
  • 期货学习笔记-MACD指标学习2
  • 5G智慧港口简介(一)
  • 订单中台架构:打造高效订单管理系统的关键
  • 【算法】模拟
  • 电力综合自动化系统对电力储能技术的影响有哪些?
  • Compose UI 之 Card 卡片组件
  • ELK日志
  • WPF Pack