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

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

news 2026/2/8 17:07:17

目前很多前端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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

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

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

编程新知 2025/11/30 16:55:29

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/30 8:46:45

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2026/1/29 5:34:29

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2026/1/31 11:35:24

Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

编程新知 2025/10/16 14:46:22

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...

编程新知 2026/2/4 16:31:26

PLC入门【4】基本指令2(SET RST)

04 基本指令2 PLC编程第四课基本指令(2) 1、运用上接课所学的基本指令完成个简单的实例编程。 2、学习SET--置位指令 3、RST--复位指令 打开软件(FX-TRN-BEG-C)&#xff0c;从 文件 - 主画面&#xff0c;“B: 让我们学习基本的”- “B-3.控制优先程序”。 点击“梯形图编辑”…...

编程新知 2026/2/6 1:20:55