纯javascript实现简单下拉刷新功能
2018-10-12 14:03
871 查看
代码很简单,实现的功能却很实用,直接奉上代码
CSS:
<meta charset="utf-8" />
<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: #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;
}
</style>
HTML:
<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>
<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>
<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];
// 把元素放在手指所在的位置
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);
}
}
</script>
以上就是本文的全部内容了,希望对大家学习javascript能够有所帮助。
您可能感兴趣的文章:
相关文章推荐
- 纯javascript实现简单下拉刷新功能
- Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能
- Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能
- Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能
- 简单几行javascript代码,实现动态倒计时功能
- ListView实现下拉刷新功能
- Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能
- javascript实现的一个带下拉框功能的文本框
- AsyncTask(1)一个使用AsyncTask实现简单异步刷新的功能。
- 使用android自带的下拉刷新效果实现页面下拉刷新功能
- Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能(附源码)
- Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能
- JS实现的简单下拉框联动功能示例
- javascript实现简单的全选和反选功能
- 安卓,采用最简单易懂的方式实现上拉刷新下拉加载更多
- Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能
- Android移动端touch实现下拉刷新功能
- 在win8中如何实现下拉刷新的功能
- JavaScript简单表格编辑功能实现方法
- Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能 .