標籤：

移動端的下拉刷新

05-25
移動端的下拉刷新

來自專欄 誤打誤撞的前端程序媛

滑動前

滑動時

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<meta name="viewport" content="width_=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,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>

</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>

<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 = "Im new";

scroll.insertBefore(node,scroll.firstChild);

}*/

alert("刷新成功");

location.reload();

}

</script>

</body>

</html>


推薦閱讀：

TAG:刷新 | 移動端 | 下拉刷新 |