JS下拉刷新列表
2017-05-07 本文已影响1111人
朝槿123
列表下拉刷新
这是一个简单的列表，要实现移动端下拉刷新的功能，每次刷新在列表前面增加五个新列表，示例图效果如下：
正在刷新
完成一次刷新
HTML完成布局
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pull to Refresh</title>
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="outerScroller">
<div class="loading">
下拉刷新数据
</div>
<ul class = 'scroll'>
<li><a href="#">列表数据1</a></li>
<li><a href="#">列表数据2</a></li>
<li><a href="#">列表数据3</a></li>
<li><a href="#">列表数据4</a></li>
<li><a href="#">列表数据5</a></li>
</ul>
</div>
<script type="text/javascript">
//goes...
</script>
</body>
</html>
js从这里开始了。。。
var scroll = document.querySelector('.scroll');
var outerScroller = document.querySelector('.outerScroller');
var touchStart = 0;
var touchDis = 0;
给outerScroller增加监听事件：触屏开始、触屏移动、触摸结束。
outerScroller.addEventListener('touchstart', function(event) {
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
touchStart = touch.pageY; //触屏开始的位置
//console.log(touchStart);
}, false);
outerScroller.addEventListener('touchmove', function(event) {
var touch = event.targetTouches[0];
//console.log(touch.pageY + 'px'); //划过的点的y的位置
touchDis = touch.pageY-touchStart; //手指划过的距离
if(touch.pageY <= touchStart)scroll.style.top = 0;
scroll.style.top = scroll.offsetTop + touchDis + 'px';
//scroll.style.top = scroll.offsetTop + touchDis + 'px';
//容器移动的距离等于它的起始位置加上鼠标移动的距离
//console.log(scroll.style.top);
touchStart = touch.pageY;
}, false);
outerScroller.addEventListener('touchend', function(event) {
touchStart = 0;
var top = scroll.offsetTop; //容器下滑到达的位置
// console.log(top);
if(top>40)refresh(); //下滑的距离超过40就刷新
if(top>0){
var time = setInterval(function(){ //计时器
scroll.style.top = scroll.offsetTop -2+'px';
if(scroll.offsetTop<=0)clearInterval(time);
},1) //返回时每一毫秒退回2px
}
}, false);
下滑的距离超过40就进行刷新。。。
function refresh(){ //每次刷新增加5个li
for(var i = 0;i<5;i++)
{
var node = document.createElement("li");
node.innerHTML = "I'm new";
scroll.insertBefore(node,scroll.firstChild);
//将node增加在scroll的前面，为第一个子类
}
}
简单的移动端下拉刷新就实现了。。。
