<script>
var content = document.querySelector('.content');
var pullRefresh = document.querySelector('.pull-refresh');
var loading = false;
var startY, endY;
var minSlipHeight = 50;
var maxSlipHeight = 200;
content.addEventListener('touchstart', function (e) {
if (loading) return;
startY = parseInt(e.changedTouches[0].pageY);
})
content.addEventListener('touchmove', function (e) {
if (loading) return;
endY = parseInt(e.changedTouches[0].pageY);
var slipHeight = parseInt(endY - startY);
// 只有正数(向下滑动)才能滑动；
if (slipHeight > 0 && slipHeight < maxSlipHeight) {
content.style.marginTop = slipHeight + 'px';
pullRefresh.style.height = slipHeight + 'px';
pullRefresh.style.lineHeight = slipHeight + 'px';
}
})
content.addEventListener('touchend', function (e) {
if (loading) return;
loading = true;
endY = parseInt(e.changedTouches[0].pageY);
// 防止内容出现滚动条，在内容中滚动而不是在顶部开始滚动；
// 被卷去的头部有兼容问题，后两种兼容ie9以前版本；
var isAtTop = window.pageYOffset === 0 || document.documentElement.scrollTop === 0 || document.body.scrollTop === 0;
var slipHeight = parseInt(endY - startY);
if (slipHeight > minSlipHeight && isAtTop) {
// console.log('执行下拉加载')
pullRefresh.innerHTML = '加载中...';
pullRefresh.style.height = minSlipHeight + 'px';
pullRefresh.style.lineHeight = minSlipHeight + 'px';
content.style.marginTop = minSlipHeight + 'px';
setTimeout(() => {
loading = false;
console.log('加载成功');
content.style.marginTop = 0;
pullRefresh.style.height = 0;
pullRefresh.innerHTML = '准备加载';
}, 2000);
} else {
// console.log('暂不需要加载更多');
loading = false;
content.style.marginTop = 0;
pullRefresh.style.height = 0;
}
})
</script>
<body>
<div class="pull-refresh">
准备加载
</div>
<div class="content">
<div class="con">
<h5>下拉加载</h5>
</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.pull-refresh {
width: 100vw;
text-align: center;
transition: height 0.02s;
background-image: linear-gradient(45deg, #ff5252 30%, #b33939 60%, #ff793f 100%);
position: absolute;
top: 0;
z-index: -1;
background-size: 200%;
animation: changeAlpha 2s alternate infinite;
}
@keyframes changeAlpha {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 50% 0%;
}
}
.content {
width: 100vw;
height: 300px;
background-color: #f5f5f5;
transition: margin-top 0.02s;
/* 3行3列 */
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.con {
grid-row: 2/3;
grid-column: 2/3;
display: flex;
justify-content: center;
align-items: center;
}
</style>
