uniapp scroll组件下拉刷新异步更新数据列表

server/2025/3/18 15:19:37/

前言

如图所示,下拉刷新,更新聊天列表。

开始

设置refresher-enabled=“true”,开启自定义下拉刷新
设置refresher-default-style和refresher-background,可以自定义下拉刷新的样式
@refresherrefresh为监听自定义下拉刷新被触发的事件,在里面可以写异步取数据的操作
设置refresher-triggered属性可以自定义下拉刷新的状态

      <scroll-view  class="scroll-Y" scroll-y="true"refresher-enabled="true"refresher-default-style="white"refresher-background="#121214"@refresherrefresh="getChatList('refresh')" :refresher-triggered="refresherTriggered"><view class="chat-list-item" v-for="(item,index) in chatList" :key="item.id"@click="goChat(item)">. . .</view></view></scroll-view>
let refresherTriggered = ref(false)
async function getChatList(type){(type == 'refresh') && (refresherTriggered.value = true)let res = await ... // 异步操作if(type == 'refresh'){// 加倒计时是让下拉刷新的效果稍微长一些,有个肉眼看到的过渡效果let timer = setTimeout(()=>{refresherTriggered.value = false;clearTimeout(timer)},500)}}

后记

在此记录这个问题的解决方法,并能提供一些思路给正在有此困扰的朋友。有任何问题可以留言一起讨论。


http://www.ppmy.cn/server/175989.html

相关文章

Markdig:强大的 .NET Markdown 解析器详解

在现代开发中&#xff0c;Markdown 已经成为了一种广泛使用的轻量级标记语言&#xff0c;特别是在文档、博客和内容管理系统中&#xff0c;Markdown 为开发者提供了快速、简洁的格式化文本方式。而在 .NET 生态中&#xff0c;Markdig 是一款非常强大的 Markdown 解析器&#xf…

Manus 一码难求,MetaGPT、OpenManus、Camel AI 会是替代方案吗?

Manus 一码难求&#xff0c;MetaGPT、OpenManus、Camel AI 会是替代方案吗&#xff1f; 一、Manus 的现象与问题 Manus 作为一款号称“全球首个通用 AI 智能体”的产品&#xff0c;凭借其强大的功能和新颖的营销策略迅速走红。然而&#xff0c;其封闭的邀请码机制和高昂的使用…

【Java】JDK1.8的ConcurrentHashMap

JDK1.8的ConcurrentHashMap通过CAS&#xff08;初始化Node节点&#xff09;、synchronized分段锁&#xff08;仅锁链表头节点/树根节点&#xff09;、链表转红黑树、多线程协助扩容等机制&#xff0c;在保证线程安全的同时实现高效并发更新。 插入代码 final V putVal(K key, …

从Instagram到画廊:社交平台如何改变艺术家的展示方式

从Instagram到画廊&#xff1a;社交平台如何改变艺术家的展示方式 在数字时代&#xff0c;艺术家的展示方式正在经历一场革命。社交平台&#xff0c;尤其是Instagram&#xff0c;已经成为艺术家展示作品、与观众互动和建立品牌的重要渠道。本文将探讨社交平台如何改变艺术家的…

【系统架构设计师】操作系统 - 文件管理 ② ( 位示图 | 空闲区域 管理 | 位号 | 字号 )

文章目录 一、空闲区域 管理1、空闲区域分配2、空闲区域 管理方式 简介 二、位示图 简介1、位示图 表示2、位示图 字号3、位示图 位号4、位示图 中 比特位 分组管理 三、位示图 考点1、计算磁盘 位示图 的大小2、位示图 位置计算 一、空闲区域 管理 1、空闲区域分配 在 索引文件…

《GitHub网路访问不稳定:解决办法》:此文为AI自动生成

《GitHub网路访问不稳定&#xff1a;解决办法》&#xff1a;此文为AI自动生成 GitHub 网路访问不稳定初现 在当今数字化时代&#xff0c;软件开发行业蓬勃发展&#xff0c;GitHub 作为全球最大的代码托管平台&#xff0c;已然成为无数开发者不可或缺的 “宝库”。它不仅汇聚了海…

实验- 分片上传 VS 直接上传

分片上传和直接上传是两种常见的文件上传方式。分片上传将文件分成多个小块&#xff0c;每次上传一个小块&#xff0c;可以并行处理多个分片&#xff0c;适用于大文件上传&#xff0c;减少了单个请求的大小&#xff0c;能有效避免因网络波动或上传中断导致的失败&#xff0c;并…

通过 API 将Deepseek响应流式内容输出到前端

要实现通过 API 将流式内容输出到前端&#xff0c;可以采用以下技术方案&#xff08;以 Python 后端 前端 JavaScript 为例&#xff09;&#xff1a; 方案一&#xff1a;使用 Server-Sent Events (SSE) 这是浏览器原生支持的流式传输方案&#xff0c;推荐首选 # Flask 示例…