下拉刷新代码 php,JavaScript_纯javascript实现简单下拉刷新功能，代码很简单，实现的功能却很 - phpStudy...

纯javascript实现简单下拉刷新功能

代码很简单，实现的功能却很实用，直接奉上代码

CSS：

Pull to Refresh

div{

position: absolute;

top:0px;

bottom:0px;

width:100%;

left:0px;

overflow: hidden;

}

li{

list-style-type: none;

height:35px;

background: #ccc;

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;

}

HTML：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

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];

// 把元素放在手指所在的位置

touchStart = touch.pageY;

console.log(touchStart);

}, false);

outerScroller.addEventListener('touchmove', function(event) {

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) {

touchStart = 0;

var top = scroll.offsetTop;

console.log(top);

if(top>70)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 = 10;i>0;i--)

{

var node = document.createElement("li");

node.innerHTML = "I'm new";

scroll.insertBefore(node,scroll.firstChild);

}

}

以上就是本文的全部内容了，希望对大家学习javascript能够有所帮助。相关阅读:

java微信开发API第四步 微信自定义个性化菜单实现

android下拉刷新ListView的介绍和实现代码

Windows系统下桌面不显示的解决办法

onmouseover事件和onmouseout事件全面理解

微软再发Win10 Build 9926的两款补丁

利用纯html5绘制出来的一款非常漂亮的时钟

自制的文件上传JS控件可支持IE、chrome、firefox etc

浅析创建javascript对象的方法

JS 面向对象之继承---多种组合继承详解

C#使用foreach语句遍历队列(Queue)的方法

Win10系统无法打开软件提示文件丢失的解决方法

javascript 获取函数形参个数

Android 解析JSON对象及实例说明

浅谈php错误提示及查错方法