前言：
现在我们对“下拉刷新页面”大概比较关注，朋友们都需要剖析一些“下拉刷新页面”的相关内容。那么小编同时在网上汇集了一些对于“下拉刷新页面””的相关内容，希望小伙伴们能喜欢，看官们一起来学习一下吧！<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5下拉刷新</title>
<style>
* {
margin: 0;
padding: 0;
}
#freshBox {
position: relative;
}
#freshBox .box li {
list-style: none;
padding-left: 20px;
border-bottom: 1px solid #eee;
height: 60px;
line-height: 60px;
}
#freshBox .box {
position: relative;
top: 0;
transition: all .5s;
background: #fff;
}
#freshBox .fresh-text {
position: absolute;
top: 0;
height: 60px;
width: 100%;
line-height: 60px;
text-align: center;
color: #ccc;
}
</style>
</head>
<body>
<div id="freshBox">
<p class="fresh-text">下拉刷新</p>
<div class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>5</li>
<li>5</li>
<li>5</li>
<li>5</li>
<li>5</li>
</div>
</div>
</body>
</html>
<script>
function $(str) { return document.querySelector(str); }
let box = $('.box');
let startY = null;
let endY = null;
box.addEventListener('touchstart', (e) => {
console.log(e);
startY = e.touches[0].pageY; // 一定要用pageY,相对页面滑动，不能相对屏幕滑动，相对屏幕滑动会出现bug
}, false);
box.addEventListener('touchmove', (e) => {
let moveY = e.touches[0].pageY - startY;
console.log(moveY);
if (moveY > 0 && moveY <= 60) {
box.style.transform = 'translateY(' + moveY + 'px)'
moveY > 50 && ($('.fresh-text').innerText = '数据已更新');
}
}, false);
box.addEventListener('touchend', (e) => {
startY = null;
$('.fresh-text').innerText = '下拉刷新';
box.style.transform = 'translateY(0px)';
}, false);
</script>
版权属于原作者，觉得写得很好，转载学习一下
标签： #下拉刷新页面
