加载的案例

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

相关推荐
LeQi3 分钟前
当!important成为代码毒瘤:你的项目是不是也中了招?
前端·css·程序员
Rubin9321 分钟前
浏览器一帧做些什么?
html
G等你下课30 分钟前
如何进行DOM操作?
javascript·html
LuckySusu42 分钟前
【CSS篇】对position: sticky定位的深入理解
前端·css
LuckySusu1 小时前
【CSS篇】什么是 Margin 重叠问题?如何解决?
前端·css
LuckySusu1 小时前
【CSS篇】元素的层叠顺序(Stacking Order)详解
前端·css
拾光拾趣录1 小时前
CSS高级技巧与实用伪类
前端·css
然我1 小时前
打工人必看!Flex “驯服” 前端面试,让代码像整理工位一样顺
前端·面试·html
漂流瓶jz9 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
涵信9 天前
第一节 布局与盒模型-Flex与Grid布局对比
前端·css