加载的案例

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

相关推荐
石金龙1 天前
[译] Composition in CSS
前端·css
天天扭码1 天前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153171 天前
CSS特异性:如何精准控制样式而不失控?
前端·css
葡萄城技术团队1 天前
所有网站通用:6 行 HTML 代码搞定页面加载提速
html
糖糖TANG1 天前
从零开始制作我的第一个静态网页——教师节主题首页开发记录
html
会豪1 天前
CSS 动画属性精讲:从基础到实战
前端·css
前端Hardy2 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy2 天前
HTML&CSS:好精致的导航栏
前端·javascript·css
前端老鹰2 天前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
墨渊君2 天前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css