<!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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
