H5实现下拉刷新功能,下面提供一个示例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>H5实现下拉刷新功能--Document</title>
<title>Pull to Refresh</title>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<style>
div {
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
left: 0px;
overflow: hidden;
}
li {
list-style-type: none;
height: 35px;
background: gainsboro;
border-bottom: solid 1px #fff;
text-align: left;
line-height: 35px;
padding-left: 15px;
}
ul {
width: 100%;
margin-top: 0px;
position: absolute;
left: 0px;
padding: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="outerScroller">
<ul class='scroll'>
<li>朋友圈1</li>
<li>朋友圈2</li>
<li>朋友圈3</li>
<li>朋友圈4</li>
<li>朋友圈5</li>
<li>朋友圈6</li>
<li>朋友圈7</li>
<li>朋友圈8</li>
<li>朋友圈9</li>
<li>朋友圈10</li>
</ul>
<div id="loading" style="display:none;text-align: center;">
加载中...
</div>
</div>
<script>
var scroll = document.querySelector('.scroll');
var outerScroller = document.querySelector('.outerScroller');
var touchStart = 0;
var touchDis = 0;
outerScroller.addEventListener('touchstart', function (event) {
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
console.log('99393939majigntang');
touchStart = touch.pageY;
console.log(touchStart);
}, false);
outerScroller.addEventListener('touchmove', function (event) {
// 开始loading
var top = scroll.offsetTop;
var loading = document.getElementById('loading');
if (top > 30) {
loading.style.display = "block"
};
// 开始loading - end
var touch = event.targetTouches[0];
// console.log(touch.pageY + 'px');
scroll.style.top = scroll.offsetTop + touch.pageY - touchStart + 'px';
// console.log(scroll.style.top);
touchStart = touch.pageY;
touchDis = touch.pageY - touchStart;
}, false);
outerScroller.addEventListener('touchend', function (event) {
// 结束loading
var loading = document.getElementById('loading');
loading.style.display = "none"
touchStart = 0;
var top = scroll.offsetTop;
// console.log('手动触发结束');
console.log(top);
if (top > 30) refresh();
if (top > 0) {
var time = setInterval(function () {
scroll.style.top = scroll.offsetTop - 2 + 'px';
if (scroll.offsetTop <= 0) clearInterval(time);
}, 1)
}
}, false);
function refresh() {
//这里是后台数据
for (var i = 3; i > 0; i--) {
var node = document.createElement("li");
node.innerHTML = "I'm new" + i;
scroll.insertBefore(node, scroll.firstChild);
}
}
</script>
</body>
</html>
这个示例基本可实现效果了