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

【原生js案例】让你的移动页面实现自定义的上拉加载和下拉刷新

news 2026/1/28 12:01:46

目前很多前端UI都是自带有上拉加载和下拉刷新功能，按照官网配置去实现即可，比如原生小程序，vantUI等UI框架，都替我们实现了内部功能。

那如何自己来实现一个上拉加载和下拉刷新的功能？

实现效果

  • 不用浏览器的css滚动条，自定义实现滚动效果
    请添加图片描述
  • 自定义实现滚动，添加上拉加载和下拉刷新
    请添加图片描述

代码实现

  • UI页面美化
*{margin: 0

相关文章：

【原生js案例】让你的移动页面实现自定义的上拉加载和下拉刷新

目前很多前端UI都是自带有上拉加载和下拉刷新功能，按照官网配置去实现即可，比如原生小程序，vantUI等UI框架，都替我们实现了内部功能。 那如何自己来实现一个上拉加载和下拉刷新的功能？ 实现效果 不用浏览器的css滚动条，自定义实现滚动效果 自定义实现滚动，添加上拉加载…...

编程日记 2024/12/24 4:49:33

【linux 常用命令】

1. 使用xshell 通过SSH连接到Linux服务器 ssh -p 端口号 usernameip地址2. 查看当前目录下的子文件夹的内存占用情况 du -a -h -d 1或者 du -ah -d 1-a ：展示所有子文件夹（包括隐藏文件夹），-h ：以人类可读的形式&am…...

编程日记 2024/12/24 4:44:29

【JetPack】Room数据库笔记

Room数据库笔记 ORM框架&#xff1a;对齐数据库数据结构与面向对象数据结构之间的关系&#xff0c;使开发编程只考虑面向对象不需要考虑数据库的结构 Entity : 数据实体&#xff0c;对应数据库中的表 <完成面向对象与数据库表结构的映射> 注解&#xff1a; 类添加注解…...

编程日记 2024/12/24 4:41:25

【CSS in Depth 2 精译_088】第五部分：添加动效概述 + 第 15 章：CSS 过渡特效概述 + 15.1：状态间的由此及彼

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第五部分 添加动效 ✔️【第 15 章 过渡】 ✔️ 15.1 状态间的由此及彼 ✔️15.2 定时函数 文章目录 第 5 部分 添加动效 Adding motion第 15 章 过渡 Transitions15.1 状态间的由此及彼 From here…...

编程日记 2024/12/24 4:40:24

# 起步专用 - 哔哩哔哩全模块超还原设计！(内含接口文档、数据库设计)

↑ 上方下载文档 (大小374KB) 接口文档预览 (超过50个接口) 一、数据库25张表er-关系清晰构图&#xff01;(tip: 鼠标右键图片 > 放大图像) 二、难点/经验 详细说明 热门评论排序评论点赞列表|DTO封装经验分享|精华接口文档说明 组员都说喜欢分档对应枚举码 如果这篇文章…...

编程日记 2024/12/24 4:35:16

[机器学习]XGBoost（3）——确定树的结构

XGBoost的目标函数详见[机器学习]XGBoost&#xff08;2&#xff09;——目标函数&#xff08;公式详解&#xff09; 确定树的结构 之前在关于目标函数的计算中&#xff0c;均假设树的结构是确定的&#xff0c;但实际上&#xff0c;当划分条件不同时&#xff0c;叶子节点包含的…...

编程日记 2024/12/24 4:31:11

PHP阶段一

PHP 一门编程语言 运行在服务器端 专门用户开发网站的 脚本后缀名.php 与HTML语言进行混编&#xff0c;脚本后缀依然是.php 解释型语言&#xff0c;不要编译直接运行 PHP运行需要环境&#xff1a; Windows phpstudy Linux 单独安装 Web 原理简述 1、打开浏览器 2、输入u…...

编程日记 2024/12/24 4:27:06

用人话讲计算机：Python篇！（十五）迭代器、生成器、装饰器

一、迭代器 &#xff08;1&#xff09;定义 标准解释&#xff1a;迭代器是 Python 中实现了迭代协议的对象&#xff0c;即提供__iter__()和 __next__()方法&#xff0c;任何实现了这两个方法的对象都可以被称为迭代器。 所谓__iter__()&#xff0c;即返回迭代器自身 所谓__…...

编程日记 2024/12/24 4:24:03

5G -- 5G网络架构

5G组网场景 从4G到5G的网络演进&#xff1a; 1、UE -> 4G基站 -> 4G核心网 * 部署初中期&#xff0c;利用存量网络&#xff0c;引入5G基站&#xff0c;4G与5G基站并存 2、UE -> (4G基站、5G基站) -> 4G核心网 * 部署中后期&#xff0c;引入5G核心网&am…...

编程日记 2024/12/24 4:17:55

VR线上展厅的色彩管理如何影响用户情绪？

VR线上展厅的色彩管理对用户情绪的影响是多方面的&#xff0c;以下是专业从事VR线上展厅制作的圆桌3D云展厅平台为大家介绍的一些关键点&#xff1a; 情感共鸣&#xff1a;色彩能够激发特定的情感反应。例如&#xff0c;暖色调&#xff08;如红色、橙色&#xff09;通常与活力和…...

编程日记 2024/12/24 4:16:52

Vue3：uv-upload图片上传

效果图&#xff1a; 参考文档&#xff1a; Upload 上传 | 我的资料管理-uv-ui 是全面兼容vue32、nvue、app、h5、小程序等多端的uni-app生态框架 (uvui.cn) 代码&#xff1a; <view class"greenBtn_zw2" click"handleAddGroup">添加班级群</vie…...

编程日记 2024/12/24 4:15:51

大数据机器学习算法和计算机视觉应用07：机器学习

Machine Learning Goal of Machine LearningLinear ClassificationSolutionNumerical output example: linear regressionStochastic Gradient DescentMatrix Acceleration Goal of Machine Learning 机器学习的目标 假设现在有一组数据 x i , y i {x_i,y_i} xi​,yi​&…...

编程日记 2024/12/24 4:03:39

基于asp.net游乐园管理系统设计与实现

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm 等开发框架&#xff09; vue .net php python(flask Django) 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找…...

编程日记 2024/12/24 4:00:35

一区牛顿-拉夫逊算法+分解+深度学习！VMD-NRBO-Transformer-GRU多变量时间序列光伏功率预测

一区牛顿-拉夫逊算法分解深度学习&#xff01;VMD-NRBO-Transformer-GRU多变量时间序列光伏功率预测 目录 一区牛顿-拉夫逊算法分解深度学习&#xff01;VMD-NRBO-Transformer-GRU多变量时间序列光伏功率预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.中科院一区…...

编程日记 2024/12/24 3:54:28

uniapp使用腾讯地图接口的时候提示此key每秒请求量已达到上限或者提示此key每日调用量已达到上限问题解决

要在创建的key上添加配额 点击配额之后进入分配页面&#xff0c;分配完之后刷新uniapp就可以调用成功了。...

编程日记 2024/12/24 3:51:23

WPF 完美解决改变指示灯的颜色

WPF 完美解决改变指示灯的颜色 原有&#xff1a;自己再做WPF页面设计后发现直接去查找页面多个控件嵌套情况下找不到指示灯&#xff08;Button实现的&#xff0c;详细可以看这篇文章 这里&#xff09;&#xff0c;具体看看来如何实现 加粗样式思路&#xff1a;无论多级嵌套&a…...

编程日记 2024/12/24 3:50:22

Flutter/Dart：使用日志模块Logger Easier

Flutter笔记 Flutter/Dart&#xff1a;使用日志模块Logger Easier Logger Easier 是一个为 Dart 和 Flutter 应用程序量身定制的现代化日志管理解决方案。它提供了一个高度灵活、功能丰富的日志记录系统&#xff0c;旨在简化开发者的日志管理工作&#xff0c;同时提供一定的定制…...

编程日记 2024/12/24 3:44:16

阿里云云服务器初始化

如果我们的云服务器出现无法挽回的错误时&#xff0c;我们可以尝试初始化云服务器进行解决。 首先搜索阿里云&#xff08;你要先确认自己已经购买了阿里云的云服务器&#xff09;&#xff1a; 登录账号后主页向下划 进入后点击管理控制台 点击进入后可以看到正在运行&#xff0…...

编程日记 2024/12/24 3:43:15

Python中SKlearn的K-means使用详解

文章目录 Python中SKlearn的K-means使用详解一、引言二、K-means算法原理三、使用SKlearn进行K-means聚类的步骤1、导入必要的库2、生成数据集3、创建K-means模型并设置参数4、训练模型5、预测簇标签6、可视化结果 四、总结 Python中SKlearn的K-means使用详解 一、引言 K-mea…...

编程日记 2024/12/24 3:30:00

红帽RHCE认证适用哪些人学习

红帽 RHCE工程师认证有着广泛的适用人群。对于初入 IT 行业的新手来说&#xff0c;RHCE 是快速建立专业基础、提升自身竞争力的绝佳途径。它能帮助新人系统地学习 Linux 系统知识&#xff0c;从基础的安装配置到复杂的网络服务管理&#xff0c;一步一个脚印地构建起坚实的技术框…...

编程日记 2024/12/24 3:22:50

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2026/1/24 12:38:03

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2026/1/26 21:47:06

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

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

编程新知 2025/11/2 1:48:43

TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

编程新知 2026/1/26 5:57:43

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

编程新知 2026/1/27 19:34:19

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...

编程新知 2025/9/12 8:55:56

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

编程新知 2025/10/6 15:50:41

SQL进阶之旅 Day 22：批处理与游标优化

【SQL进阶之旅 Day 22】批处理与游标优化 文章简述&#xff08;300字左右&#xff09; 在数据库开发中&#xff0c;面对大量数据的处理任务时&#xff0c;单条SQL语句往往无法满足性能需求。本篇文章聚焦“批处理与游标优化”&#xff0c;深入探讨如何通过批量操作和游标技术提…...

编程新知 2025/9/29 3:08:51

Cursor AI 账号纯净度维护与高效注册指南

Cursor AI 账号纯净度维护与高效注册指南&#xff1a;解决限制问题的实战方案 风车无限免费邮箱系统网页端使用说明|快速获取邮箱|cursor|windsurf|augment 问题背景 在成功解决 Cursor 环境配置问题后&#xff0c;许多开发者仍面临账号纯净度不足导致的限制问题。无论使用 16…...

编程新知 2026/1/15 20:22:22