<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
}
.content {
transition: margin-top 0.2s;
width: 100vw;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.con {
grid-row: 2 / 3;
grid-column: 2 / 3;
display: flex;
justify-content: center;
align-items: center;
}
.pullRefresh {
transition: height 0.2s;
position: absolute;
top: 0;
z-index: -1;
width: 100vw;
/* height: 50px; */
display: flex;
justify-content: center;
align-items: center;
color: white;
background-size: 200%;
animation: alphaGradient 3s alternate infinite;
background-image: linear-gradient(45deg, #ff5252 30%, #b33939 90%, #ff793f 100%);
}
@keyframes alphaGradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 50% 0;
}
}
</style>
<body>
<div class="pullRefresh">准备加载...</div>
<div class="content">
<div class="con">
下拉加载
</div>
</div>
</body>
<script>
//获取到操作的dom元素
const content = document.querySelector('.content');
const pullRefresh = document.querySelector('.pullRefresh');
let startY, endY;
content.addEventListener("touchstart", function (e) {
startY = parseInt(e.changedTouches[0].pageY)
});
content.addEventListener("touchmove", function (e) {
endY = parseInt(e.changedTouches[0].pageY);
if (endY - startY > 0) {
content.style.marginTop = `${endY - startY}px`;
pullRefresh.style.height = `${endY - startY}px`;
}
});
content.addEventListener("touchend", function (e) {
endY = parseInt(e.changedTouches[0].pageY)
if (endY - startY > 200 && (window.pageYOffset === 0 || document.documentElement.scrollTop === 0)) {
pullRefresh.innerHTML = "加载中"
content.style.marginTop = '50px';
pullRefresh.style.height = '50px';
setTimeout(() => {
pullRefresh.innerHTML = "加载成功"
setTimeout(() => {
content.style.marginTop = 0;
pullRefresh.style.height = 0;
setTimeout(() => {
pullRefresh.innerHTML = "准备加载..."
}, 1000);
}, 1000);
}, 2000);
} else {
console.log('下拉幅度不够');
content.style.marginTop = 0;
pullRefresh.style.height = 0;
}
});
</script>
</html>
