js實現的移動端下拉重新整理功能程式碼例項

本章節分享一段程式碼例項，它實現了手動滑動下拉能夠重新整理頁面的功能。

這通常應用在移動端的網站，下面就是一段能夠實現此功能的程式碼示例，如下:

一.CSS程式碼如下:

[CSS] 純文字檢視 複製程式碼
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程式碼如下:

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

三.js程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
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);
  }
}