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

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

news 2026/5/22 7:16:20

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

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

工业 CAN 通信利器！六通道隔离集线器，中继滤波稳组网

工业 CAN 总线距离受限、速率不匹配、数据拥堵、故障难排查&#xff1f;三格电子SG-CanHub-600 六通道 CAN 集线器&#xff0c;工业级隔离中继&#xff0c;信号再生 智能滤波&#xff0c;轻松解决 CAN 网络通信难题&#xff01;⚙️ 硬核实力&#xff0c;工业通信强支撑✅ 六通…...

编程新知 2026/5/22 7:04:55

微信聊天记录丢了怎么找回？这份教程很实用

你是否经历过这样的崩溃瞬间&#xff1a;手机清理空间时不小心删了微信聊天记录&#xff0c;或者重装微信后发现重要的对话全部消失&#xff1f;别慌&#xff0c;本文将系统梳理微信聊天记录丢失的常见原因&#xff0c;并提供多种经过验证的恢复方案&#xff0c;从微信官方自带…...

编程新知 2026/5/22 6:52:13

使用Coze制作一个可以“动”的存钱罐，比记账APP更易用

可视化、AI驱动、自动提醒才是你智能存钱的伙伴──────────────────────────────为什么你的存钱计划总是失败&#xff1f;大多数人的存钱失败&#xff0c;并不是由于缺乏决心&#xff0c;而是缺少反馈。存多少钱、目标达成的比例、离目标还有多远…...

编程新知 2026/5/22 6:21:02

告别频繁中断！华大HC32F4A0串口DMA接收实战：用TIMEOUT中断替代STM32的IDLE

HC32F4A0串口DMA接收优化&#xff1a;TIMEOUT中断替代STM32 IDLE的工程实践 对于习惯了STM32开发环境的工程师而言&#xff0c;华大半导体的HC32F4A0系列微控制器在串口通信处理上存在一个显著差异——缺少IDLE中断机制。这一差异在RS485通信等需要帧完整性判断的场景中尤为突出…...

编程新知 2026/5/22 6:01:22

Navicat密码忘了别慌！手把手教你用Java小工具找回（支持15/16版本）

Navicat密码找回实战指南&#xff1a;零基础也能操作的Java解密方案 上周五凌晨两点&#xff0c;李工程师在部署紧急热修复时突然发现——Navicat里保存的生产数据库密码居然记不清了。这个场景对于经常需要管理多个数据库连接的开发者来说并不陌生。本文将详细介绍一套经过验证…...

编程新知 2026/5/22 5:38:36

1.2 struct page 与 PFN：VMA 背后的物理存储

本篇目标&#xff1a;理解 Linux 如何为每个物理页帧维护元数据&#xff08;struct page&#xff09;&#xff0c;以及虚拟地址最终如何落实到物理内存。HMM 的关键创新之一&#xff0c;是让设备内存&#xff08;GPU VRAM&#xff09;也拥有 struct page&#xff0c;从而被内核…...

编程新知 2026/5/22 5:10:44

玻璃材质提示词失效率高达67%？2024最新Glass Prompt Framework v3.0（含Cinema4D材质参数→MJ语义映射表）

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;玻璃材质提示词失效率的行业现状与归因分析 在当前AIGC图像生成领域&#xff0c;“glass material”&#xff08;玻璃材质&#xff09;类提示词的失效问题已成高频痛点。多项基准测试显示&#xff0c;主流多模…...

编程新知 2026/5/22 3:30:40

远程办公远控软件怎么选？ToDesk、向日葵、UU远程深度对比

远程办公远控软件怎么选&#xff1f;ToDesk、向日葵、UU远程深度对比远程办公这件事&#xff0c;现在很多人已经习惯了。但很多人忽略了一个问题——远程办公体验好不好&#xff0c;很大程度上取决于你用的远控软件怎么样。我之前帮公司选远控工具的时候&#xff0c;认真把市面…...

编程新知 2026/5/22 2:38:24

SurfaceFlinger 调用 libdrm 的详细代码流程分析

1. 整体架构图 ┌─────────────────────────────────────────────────────────────────┐ │ 应用层框架 │ │ ┌──────────────…...

编程新知 2026/5/22 1:42:19

【专利视点】某抗病毒药物领域明星企业上市进程知产问题分析

医药领域IPO&#xff0c;正在随着证券市场监管新形势而发生变化&#xff0c;并从CXO板块向更多细分赛道延伸。知识产权问题是影响企业IPO上市的重要因素之一。从上海证券交易所官网统计得知&#xff0c;截至2024年10月14日&#xff0c;有102家医药制造业企业终止科创板IPO申请&…...

编程新知 2026/5/22 1:40:16