加载的案例

<!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;

font-family: Arial, sans-serif;

}

#loadingContainer {

display: none; /* 默认隐藏 */

position: fixed;

top: 0;

left: 0;

right: 0;

background-color: white;

text-align: center;

padding: 10px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

z-index: 1000;

}

.spinner {

display: inline-block;

border: 4px solid rgba(0, 0, 0, 0.1);

border-radius: 50%;

border-top: 4px solid #333;

width: 20px;

height: 20px;

animation: spin 1s linear infinite;

}

@keyframes spin {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

}

.loadingText {

display: inline-block;

margin-left: 10px;

}

#content {

text-align: center;

padding: 20px;

margin-top: 50px; /* 提供顶部空间 */

font-size: 18px;

color: #333;

}

</style>

</head>

<body>

<div id="loadingContainer">

<div class="spinner"></div>

<div class="loadingText">加载中...</div>

</div>

<div id="content">

----------------下滑展示聊天记录---------------------

</div>

<script>

var swipeUpTriggered = false;

var touchStartY = null;

var loadingContainer = document.getElementById("loadingContainer");

document.addEventListener("touchstart", function (e) {

if (window.scrollY === 0) {

touchStartY = e.touches[0].clientY;

}

});

document.addEventListener("touchmove", function (e) {

if (touchStartY === null) {

return;

}

var touchMoveY = e.touches[0].clientY;

if (touchMoveY > touchStartY && !swipeUpTriggered) {

loadingContainer.style.display = "block"; // 显示加载动画

swipeUpTriggered = true;

}

});

document.addEventListener("touchend", function (e) {

if (swipeUpTriggered) {

handleSwipeUp();

swipeUpTriggered = false;

}

touchStartY = null;

});

function handleSwipeUp() {

// 模拟数据加载过程

setTimeout(function () {

loadingContainer.style.display = "none"; // 隐藏加载动画

// 这里可以添加加载数据的代码

}, 2000); // 假设加载数据需要2秒

}

</script>

</body>

</html>

相关推荐
F2E_Zhangmo12 分钟前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
蔗理苦3 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
王ASC4 小时前
禁止浏览器自动填充密码的方法
html
qq_510351596 小时前
vw 和 clamp()
前端·css·html
我的写法有点潮8 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
Mo_jon8 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
写不出来就跑路11 小时前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html
我的写法有点潮12 小时前
Scss 的四种导入方式你都知道吗
前端·css
叶玳言1 天前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
Gazer_S1 天前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js