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

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

news 2025/7/8 10:47:57

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

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

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/7/6 14:15:06

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/7/6 2:30:53

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2025/7/7 20:06:50

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2025/7/7 0:36:08

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/6/28 13:23:48

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2025/7/7 12:13:41

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2025/7/6 12:31:59

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

编程新知 2025/7/7 15:21:47

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

编程新知 2025/7/8 5:25:00

32位寻址与64位寻址

32位寻址与64位寻址 32位寻址是什么&#xff1f; 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元&#xff08;地址&#xff09;&#xff0c;其核心含义与能力如下&#xff1a; 1. 核心定义 地址位宽&#xff1a;CPU或内存控制器用32位…...

编程新知 2025/7/7 12:11:00