<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<style>
body{padding-top:48px;}
.status_bar{background:#fff;height:48px;position:fixed;width:100%; top:0px; z-index:99}
/*下拉刷新上拉加载*/
.container{background:#ddd;position:relative;height:100%;transition:transform 0.3s ease-out)}
.content{height:calc(100vh - 48px);overflow:scroll;}
.refresh-header{position:absolute;top:-40px;width:100%;text-align:center;}
.load-footer{text-align:center}
</style>
<div class="status_bar"></div>
<div class="container">
<div class="refresh-header"> <img src="images/three-dots.svg" style="width:60px;margin-bottom:10px;"> </div>
<div class="content">
<div style="height:1400px">内容区域...</div>
<div class="load-footer">上拉加载</div>
</div>
</div>
<script>
//下拉刷新上拉加载
var container = document.querySelector('.container');
var content = document.querySelector('.content');
var startY, currentY;
var pulling = false;
var timeoutId = null;
//触碰屏幕
container.addEventListener('touchstart', e => {
startY = e.touches[0].pageY;
});
//滑动屏幕
container.addEventListener('touchmove', e => {
currentY = e.touches[0].pageY;
//顶部下拉
if (content.scrollTop === 0 && currentY > startY) {
var distance = currentY - startY;
if (distance > 50) {
pulling=true;
//显示下拉动画
container.style.transform = 'translateY('+distance+'px)';
container.style.transition = '';
clearTimeout(timeoutId);
}
//底部上拉
} else if (isBottom() && startY > currentY) {
//加载数据...
console.log("到底了")
}
});
//离开屏幕
container.addEventListener('touchend', e => {
if (!pulling) return;
pulling = false;
container.style.transition = 'transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
container.style.transform = 'translateY(50px)';
//关闭下拉动画
timeoutId = setTimeout(() => {
container.style.transform = 'translateY(0px)';
//触发刷新
//location.reload();
}, 2000);
});
//是否到底
function isBottom() {
return content.scrollTop >= content.offsetHeight
}
</script>