原生js下拉刷新、上拉加载效果实现（附代码）
程序员文章站
2022-04-13 11:47:34
...
本篇文章给大家带来的内容是关于原生js下拉刷新、上拉加载效果实现（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
在控制台切换到移动端就可以看效果了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 60px;
background: pink;
line-height: 60px;
text-align: center;
color: white;
}
.content {
width: 200px;
height: 1000px;
border: 2px solid green;
background: linear-gradient(#fff, #000);
-webkit-flex-shrink: 0;
flex-shrink: 0;
margin: 60px auto 0;
}
img {
width: 100%;
height: 180px;
position: absolute;
top: 60px;
left: 0;
display: none;
z-index: -1
}
p{
line-height: 30px;
text-align: center;
display: none
}
</style>
</head>
<body>
<div>
<div>首页</div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536127130721&di=f192c5e1749dd2aa73b8a5b7297bd0cc&imgtype=0&src=http%3A%2F%2Fs10.sinaimg.cn%2Fmiddle%2F4ac1551583fc20f4db299%26690"
alt="">
<div></div>
<p>加载中...</p>
</div>
<script>
var oImg = document.getElementsByTagName('img')[0];
var oP=document.getElementsByTagName('p')[0];
var oHeader = document.getElementsByClassName('header')[0];
var oContent = document.getElementsByClassName('content')[0];
var screenH = document.documentElement.clientHeight || document.body.clientHeight;
var startY,
moveY;
oContent.addEventListener('touchstart', (e) => {
startY = e.touches[0].pageY;
})
oContent.addEventListener('touchmove', (e) => {
moveY = e.touches[0].pageY - startY;
});
oContent.addEventListener('touchend', () => {
if (moveY > 0) {//下拉
oImg.style.display = 'block';
if (moveY > 180) moveY = 180;
oContent.style.marginTop = moveY + oHeader.clientHeight + 'px';
//刷新数据后再走下面的
var timer = setInterval(() => {
moveY -= 1;
if (moveY <= 0) {
oImg.style.display = 'none';
clearInterval(timer);
moveY = 0
}
oContent.style.marginTop = moveY + oHeader.clientHeight + 'px';
}, 4)
} else {//上拉
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop + screenH + 20 >= oContent.scrollHeight) {
oP.style.display='block'
//加载下条数据
setTimeout(() => {
oP.style.display='none'
oContent.style.height = oContent.clientHeight + 300 + 'px'
}, 500)
}
}
})
</script>
</body>
</html>
以上就是对原生js下拉刷新、上拉加载效果实现（附代码）的全部介绍，如果您想了解更多有关JavaScript视频教程，请关注PHP中文网。
以上就是原生js下拉刷新、上拉加载效果实现（附代码）的详细内容，更多请关注其它相关文章！