加载的案例

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

相关推荐
电商api接口开发5 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc
Senar6 小时前
Web端选择本地文件的几种方式
前端·javascript·html
我爱吃朱肉8 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
全栈老李技术面试8 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
我爱吃朱肉9 小时前
HTMLcss实现网站抽奖
css·html
街尾杂货店&10 小时前
HTML word属性
前端·html
工呈士10 小时前
HTML与安全性:XSS、防御与最佳实践
前端·html·xss
土豆125010 小时前
构建高级半圆形进度条:SVG 与 纯 CSS 方案深度解析与完整代码
css·react.js·svg
土豆125011 小时前
Tailwind CSS 精通指南:提升效率、可维护性与最佳实践
前端·css
kooboo china.12 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器