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

移动端实现下拉刷新和上拉加载（内含案例）

news 文章来源：https://blog.csdn.net/misstianyun/article/details/142689590 2025/5/11 4:39:32

在前端开发中，上拉加载和下拉刷新常用于实现内容的动态加载，尤其在移动端的应用中。下面我将提供一个简单的示例和逻辑说明。

1. 逻辑说明：

  • 下拉刷新：

    • 用户向下拖动页面顶部，触发一个事件，刷新当前内容。
    • 需要检测页面的 scrollTop 为 0 时的拖动行为。

  • 上拉加载：

    • 用户滚动到页面底部时，触发数据加载事件，加载更多内容。
    • 需要检测页面的 scrollHeight 和 clientHeight 之间的距离接近为 0 时的滚动行为。

2. 案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>上拉加载 & 下拉刷新</title><style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;}#content {height: 100vh;overflow-y: auto;}.item {padding: 20px;border-bottom: 1px solid #ccc;}.loading {text-align: center;padding: 20px;display: none;}</style>
</head>
<body><div id="content"><div id="items"></div><div class="loading" id="loading">加载中...</div></div><script>const content = document.getElementById('content');const items = document.getElementById('items');const loading = document.getElementById('loading');// 模拟初始内容加载let page = 1;function loadItems() {for (let i = 0; i < 10; i++) {const div = document.createElement('div');div.className = 'item';div.innerText = 'Item ' + (items.children.length + 1);items.appendChild(div);}}loadItems();// 下拉刷新let startY = 0;content.addEventListener('touchstart', (e) => {if (content.scrollTop === 0) {startY = e.touches[0].pageY;}});content.addEventListener('touchmove', (e) => {const moveY = e.touches[0].pageY;if (moveY - startY > 100 && content.scrollTop === 0) {// 模拟刷新操作alert('刷新页面');items.innerHTML = '';loadItems();}});// 上拉加载更多content.addEventListener('scroll', () => {if (content.scrollTop + content.clientHeight >= content.scrollHeight) {loading.style.display = 'block';setTimeout(() => {loadItems();loading.style.display = 'none';}, 1000); // 模拟加载延迟}});</script>
</body>
</html>

3. 逻辑详细说明：

  • 下拉刷新：

    • 通过 touchstart 获取用户的起始触摸点，并在 touchmove 事件中判断是否有下拉行为（页面滚动条处于顶部时）。
    • 一旦检测到下拉超过一定距离（如100px），执行刷新操作，如重新加载页面内容。

  • 上拉加载：

    • 通过 scroll 事件监测用户的滚动行为，检测当前滚动条位置是否接近页面底部。
    • 当 scrollTop + clientHeight 等于或超过 scrollHeight 时，触发加载更多内容的操作，显示“加载中”提示，并在短暂延迟后加载更多数据。

这种实现方式适用于简单的内容列表，可以根据需求调整加载条件与显示样式。

相关文章：

移动端实现下拉刷新和上拉加载（内含案例）

在前端开发中&#xff0c;上拉加载和下拉刷新常用于实现内容的动态加载&#xff0c;尤其在移动端的应用中。下面我将提供一个简单的示例和逻辑说明。 1. 逻辑说明&#xff1a; 下拉刷新&#xff1a; 用户向下拖动页面顶部&#xff0c;触发一个事件&#xff0c;刷新当前内容。需…...

编程日记 2024/10/4 16:31:26

Opencv第十一章——视频处理

1. 读取并显示摄像头视频 1.1 VideoCapture类 VideoCapture类提供了构造方法VideoCapture(),用于完成摄像头的初始化工作&#xff0c;其语法格式如下&#xff1a; capture cv2.VideoCapture(index) 参数说明&#xff1a; capture:要打开的摄像头视频。 index:摄像头设备索引。…...

编程日记 2024/10/4 16:30:24

Flutter 3.24 AAPT: error: resource android:attr/lStar not found.

在Android build,gradle下面&#xff0c;添加右边红框的代码&#xff1a; subprojects {afterEvaluate { project ->if (project.plugins.hasPlugin("com.android.application") ||project.plugins.hasPlugin("com.android.library")) {project.androi…...

编程日记 2024/10/4 16:29:23

C++——输入一个2*3的矩阵, 将这个矩阵向左旋转90度后输出。（要求：使用指针完成。）

没注释的源代码 #include <iostream> using namespace std; int main() { int a[2][3]; cout<<"请输入一个2*3的矩阵:"<<endl; for(int i0;i<2;i) { for(int j0;j<3;j) { cin>>a[i][j…...

编程日记 2024/10/4 16:28:23

AI芯片WT2605C赋能厨房家电，在线对话操控，引领智能烹饪新体验：尽享高效便捷生活

在智能家居的蓬勃发展中&#xff0c;智能厨电作为连接科技与生活的桥梁&#xff0c;正逐步渗透到每一个现代家庭的厨房中。蒸烤箱作为智能厨电的代表&#xff0c;以其丰富的功能和高效的性能&#xff0c;满足了人们对美食的多样化追求。然而&#xff0c;面对众多复杂的操作功能…...

编程日记 2024/10/4 16:26:21

详解调用钉钉AI助理消息API发送钉钉消息卡片给指定单聊用户

文章目录 前言准备工作1、在钉钉开发者后台创建一个钉钉企业内部应用&#xff1b;2、创建并保存好应用的appKey和appSecret&#xff0c;后面用于获取调用API的请求token&#xff1b;3、了解AI助理主动发送消息API&#xff1a;4、应用中配置好所需权限&#xff1a;4.1、权限点4.…...

编程日记 2024/10/4 16:24:19

57 长短期记忆网络(LSTM)_by《李沐:动手学深度学习v2》pytorch版

系列文章目录 文章目录 系列文章目录长短期记忆网络&#xff08;LSTM&#xff09;门控记忆元输入门、忘记门和输出门候选记忆元 (相当于RNN中计算 H t H_t Ht​)记忆元隐状态 从零开始实现初始化模型参数定义模型训练和预测 简洁实现小结练习 长短期记忆网络&#xff08;LSTM&a…...

编程日记 2024/10/4 16:23:18

Linux系统安装教程

Linux安装流程 一、前置准备工作二、开始安装Linux 一、前置准备工作 安装好VMWare虚拟机&#xff0c;并下载Linux系统的安装包&#xff1b; Linux安装包路径为&#xff1a;安装包链接 &#xff0c; 提取码为&#xff1a;4tiM 二、开始安装Linux...

编程日记 2024/10/4 16:20:15

Redis: Sentinel工作原理和故障迁移流程

Sentinel 哨兵几个核心概念 1 ) 定时任务 Sentinel 它是如何工作的&#xff0c;是如何感知到其他的 Sentinel 节点以及 Master/Slave节点的就是通过它的一系列定时任务来做到的&#xff0c;它内部有三个定时任务 第一个就是每一秒每个 Sentinel 对其他 Sentinel 和 Redis 节点…...

编程日记 2024/10/4 16:19:14

通信工程学习：什么是IGMP因特网组管理协议

IGMP&#xff1a;因特网组管理协议 IGMP&#xff08;Internet Group Management Protocol&#xff0c;因特网组管理协议&#xff09;是TCP/IP协议簇中负责组播成员管理的协议。它主要用于在用户主机和与其直接相连的组播路由器之间建立和维护组播组成员关系。以下是关于IGMP协议…...

编程日记 2024/10/4 16:18:14

高效批量导入多个SQL文件至SQL Server数据库的实用方法

当需要批量导入多个SQL文件到SQL Server数据库时&#xff0c;可以通过以下几种方法来实现&#xff1a; 方法一&#xff1a;使用SQLCMD命令行工具&#xff08;亲测可用&#xff09; 准备SQL文件&#xff1a;确保所有的SQL文件都位于同一个文件夹内&#xff0c;并且文件扩展名为…...

编程日记 2024/10/4 16:17:13

【树莓派系列】树莓派wiringPi库详解，官方外设开发

树莓派wiringPi库详解&#xff0c;官方外设开发 文章目录 树莓派wiringPi库详解&#xff0c;官方外设开发一、安装wiringPi库二、wiringPi库API大全1.硬件初始化函数2.通用GPIO控制函数3.时间控制函数4.串口通信串口API串口通信配置多串口通信配置串口自发自收测试串口间通信测…...

编程日记 2024/10/4 16:13:08

前端模块化CommonJs、ESM、AMD总结

前端开发模式进化史 前端工程化正是为了应对这些演化中出现的挑战和需求而发展起来的&#xff1a; 前后端混合&#xff1a;服务端渲染&#xff0c;javascript仅实现交互前后端分离&#xff1a;借助 ajax 实现前后端分离、单页应用(SPA)等新模式模块化开发&#xff1a;npm 管理…...

编程日记 2024/10/4 16:12:06

JavaWeb - 8 - 请求响应 分层解耦

请求响应 请求&#xff08;HttpServletRequest&#xff09;&#xff1a;获取请求数据 响应&#xff08;HttpServletResponse&#xff09;&#xff1a;设置响应数据 BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程…...

编程日记 2024/10/4 16:11:05

1G，2G，3G，4G，5G各代通信技术的关键技术，联系和区别

目录 1G2G3G4G5G各代通信技术的联系和区别联系区别 1G 1G的主要特点是无线移动化。关键技术为蜂窝组网&#xff0c;支持频率复用和移动切换&#xff0c;可以实现个人和个人移动状态下不间断的语音通信。 1G通信系统现已关闭&#xff0c;其主要缺点是串好和盗号。 2G 数字化…...

编程日记 2024/10/4 16:10:04

【宽搜】2. leetcode 102 二叉树的层序遍历

题目描述 题目链接&#xff1a;二叉树的层序遍历 根据上一篇文章的模板可以直接写代码&#xff0c;需要改变的就是将N叉树的child改为二叉树的left和right。 代码 class Solution { public:vector<vector<int>> levelOrder(TreeNode* root) {vector<vector&…...

编程日记 2024/10/4 16:09:03

Go语言实现长连接并发框架 - 请求分发器

文章目录 前言接口结构体接口实现项目地址最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;我们上篇博客实现了任务管理器的功能&#xff0c;接下来这篇博客我们将要实现请求分发模块的开发 接口 trait/dispatcher.go type Dispatcher interface {Start()Dispatch(conn…...

编程日记 2024/10/4 16:06:00

Redis: 集群测试和集群原理

集群测试 1 ) SET/GET 命令 测试 set 和 get 因为其他命令也基本相似&#xff0c;我们在 101 节点上尝试连接 103 $ /usr/local/redis/bin/redis-cli -c -a 123456 -h 192.168.10.103 -p 6376我们在插入或读取一个 key的时候&#xff0c;会对这个key做一个hash运算&#xff0c…...

编程日记 2024/10/4 16:02:57

问题解决实录 | bash 中 tmux 颜色显示不全

点我进入博客 如下图&#xff0c;tmux 中颜色显示不全: echo $TERM输出的是 screen 但在 bash 里面输出的是 xterm-256 color 在 bash 里面输入&#xff1a; touch ~/.tmux.conf vim ~/.tmux.conf set -g default-terminal "xterm-256color"使之生效 source …...

编程日记 2024/10/4 16:00:55

古典舞在线交流平台：SpringBoot设计与实现详解

摘 要 随着互联网技术的发展&#xff0c;各类网站应运而生&#xff0c;网站具有新颖、展现全面的特点。因此&#xff0c;为了满足用户古典舞在线交流的需求&#xff0c;特开发了本古典舞在线交流平台。 本古典舞在线交流平台应用Java技术&#xff0c;MYSQL数据库存储数据&#…...

编程日记 2024/10/4 15:59:54

五子棋双人对战项目（6）——对战模块(解读代码)

目录 一、约定前后端交互接口的参数 1、房间准备就绪 &#xff08;1&#xff09;配置 websocket 连接路径 &#xff08;2&#xff09;构造 游戏就绪 的 响应对象 2、“落子” 的请求和响应 &#xff08;1&#xff09;“落子” 请求对象 &#xff08;2&#xff09;“落子…...

编程日记 2024/10/4 15:58:53

查缺补漏----I/O中断处理过程

中断优先级包括响应优先级和处理优先级&#xff0c;响应优先级由硬件线路或查询程序的查询顺序决定&#xff0c;不可动态改变。处理优先级可利用中断屏蔽技术动态调整&#xff0c;以实现多重中断。下面来看他们如何运用在中断处理过程中&#xff1a; 中断控制器位于CPU和外设之…...

编程日记 2024/10/4 15:57:52

Java API接口开发规范

文章目录 一、命名规范1.1 接口命名1.2 变量命名 二、接收参数规范2.1 请求体&#xff08;Body&#xff09;2.2 查询参数&#xff08;Query Parameters&#xff09; 三、参数检验四、接收方式规范五、异常类处理六、统一返回格式的定义七、API接口的幂等性&#xff08;Idempote…...

编程日记 2024/10/4 15:56:50

Go语言实现长连接并发框架 - 任务管理器

文章目录 前言接口结构体接口实现项目地址最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;我们上篇博客实现了路由分组的功能&#xff0c;接下来这篇博客我们将要实现任务管理模块 接口 trait/task_mgr.go type TaskMgr interface {RouterGroupStart()StartWorker(tas…...

编程日记 2024/10/4 15:55:49

【大数据】深入解析分布式数据库：架构、技术与未来

目录 1. 分布式数据库的定义2. 架构类型2.1 主从架构2.2 同步与异步复制2.3 分片架构 3. 技术实现3.1 一致性模型3.2 CAP理论3.3 数据存储引擎 4. 应用场景5. 选择分布式数据库的因素5.1 数据一致性需求5.2 读写负载5.3 成本5.4 技术栈兼容性 6. 未来发展趋势总结 分布式数据库…...

编程日记 2024/10/4 15:54:48

uniapp框架中实现文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间

前言 uni-file-picker是uniapp中的一个文件选择器组件，用于选择本地文件并返回选择的文件路径或文件信息。该组件支持选择单个文件或多个文件，可以设置文件的类型、大小限制，并且可以进行文件预览。 提示：以下是本篇文章正文内容，下面案例可供参考 uni-file-picker组件具…...

编程日记 2024/10/4 15:51:44

GEE教程：NASA/GRACE/MASS_GRIDS/LAND数据的查看不同时期液态水数据的变化情况

目录 简介 NASA/GRACE/MASS_GRIDS/LAND 函数 first() Arguments: Returns: Image 代码 结果 简介 利用NASA/GRACE/MASS_GRIDS/LAND数据的查看不同时期液态水数据的变化情况。 NASA/GRACE/MASS_GRIDS/LAND NASA/GRACE/MASS_GRIDS/LAND数据是由NASA的重力恒星MASS数据…...

编程日记 2024/10/4 15:50:38

世邦通信股份有限公司IP网络对讲广播系统RCE

漏洞描述 SPON世邦IP网络广播系统采用的IPAudio™技术, 将音频信号以数据包形式在局域网和广域网上进行传送&#xff0c;是一套纯数字传输的双向音频扩声系统。传统广播系统存在的音质不佳&#xff0c;传输距离有限&#xff0c;缺乏互动等问题。该系统设备使用简便&#xff0c…...

编程日记 2024/10/4 15:49:37

爬虫——爬取小音乐网站

爬虫有几部分功能&#xff1f;&#xff1f;&#xff1f; 1.发请求&#xff0c;获得网页源码 #1.和2是在一步的 发请求成功了之后就能直接获得网页源码 2.解析我们想要的数据 3.按照需求保存 注意&#xff1a;开始爬虫前&#xff0c;需要给其封装 headers {User-…...

编程日记 2024/10/4 15:48:36

5G NR SSB简介

文章目录 SSB介绍SSB波束扫描 SSB介绍 5G NR 引入了SSB 这个概念&#xff0c;同步信号和PBCH块(Synchronization Signal and PBCH block, 简称SSB) 它由主同步信号(Primary Synchronization Signals, 简称PSS)、辅同步信号(Secondary Synchronization Signals, 简称SSS)、PBCH…...

编程日记 2024/10/4 15:47:35