js achieve the drop-down refresh function

Renderings: To be effective in the analog mobile phone browser
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    .page {
      width: 200px;
      height: 400px;
      background: #f7f7f7;
      overflow: hidden;
    }

    .content {
      padding: 20px;
      margin: 0 20px;
    }

    li {
      padding: 20px;
      height: 20px;
      margin: 10px;
      background: white;
    }

    .refresh-loading {
      transition: all 300ms ease 0s;
      height: 0;
      padding-top: 10px;
      overflow: hidden;
    }

    .refresh-loading .g-m--c {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      -webkit-animation-name: locate-loading;
      -moz-animation-name: locate-loading;
      animation-name: locate-loading;
      -webkit-animation-duration: 1.58s;
      -moz-animation-duration: 1.58s;
      animation-duration: 1.58s;
      -webkit-animation-timing-function: linear;
      -moz-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      border-top: 2px solid #f43939;
      border-left: 2px solid #df5555;
      margin: auto;
    }

    @keyframes locate-loading {
      0% {
        opacity: 1;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        opacity: 1;
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @-webkit-keyframes locate-loading {
      0% {
        opacity: 1;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        opacity: 1;
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @-moz-keyframes locate-loading {
      0% {
        opacity: 1;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        opacity: 1;
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    .refresh-txt {
      color: #999;
      text-align: center;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div class="page">
    <div class="refresh-loading">
      <div class="g-m--c"></div>
      <p class="refresh-txt">下拉可刷新</p>
    </div>
    <ul class="content">
      <li>t条目1</li>
      <li>t条目1</li>
      <li>t条目1</li>
      <li>t条目1</li>
    </ul>
  </div>
</body>

<script>
  var= document.getElementsByClassName moveEle ( ' Content ' ) [ 0 ]; // content 
  var refreshEle = document.getElementsByClassName ( ' Refresh-loading ' ) [ 0 ]; // refresh loading 
  var refreshTxtEle = document.getElementsByClassName ( ' Refresh-TXT ' ) [ 0 ]; // prompt text display refresh 
  var Touch, Moved, the startY is, the diff, moveDiff = 60 , 
    pagePull = to true ; 
  moveEle.addEventListener ( ' touchstart' , Function (E) {
     IF (window.scrollY> 0 ) {
       // if the rolling page has not or top when the pull-down does not require refresh, the slide is normal page 
      Touch = to false ;
       return ; 
    } 
    Touch = to true ; // touch start 
    Moved = to false ; // not yet slid pull-down refresh 
    the startY is e.touches = [ 0 ] .clientY; // record the longitudinal coordinate of the current finger on the screen, for determining whether the page is on the slider or decline 
  }, to false ); 
  moveEle.addEventListener ( ' touchMove ' , function (E) {
     IF(! Touch ||! pagePull) {
       return ; 
    } 
    var touchesDiff e.touches = [ 0 ] .clientY - the startY is; // calculate movement displacement 
    IF (touchesDiff < 0 ) {
       // description page is sliding upward, not any operation 
      Moved = to false ;
       return ; 
    } 
    Moved = to true ; 
    the diff = touchesDiff;
     var Distance = 0 ;
     IF (the diff <= moveDiff) {
       // moveDiff at least equal to the height of the loading
       //When the slide is smaller than the predetermined threshold value 
      Distance = the diff; 
      refreshTxtEle.innerHTML = ' drop-down refresh ' ; 
    } the else { 
      refreshTxtEle.innerHTML = ' release refresh ' ;
       // elastic 
      IF (touchesDiff <= ( 2 * moveDiff)) { 
        Distance = moveDiff + 0.5 * (touchesDiff - moveDiff); 
      } the else { 
        Distance = moveDiff + 0.1 * (touchesDiff - moveDiff) + 0.05 * (touchesDiff -2 * moveDiff);
      }
    }
    if (distance > 0) {
      //滑动的距离
      css(refreshEle, 0);
      refreshEle.style.height = distance + 'px';
    }
  }, false);
  moveEle.addEventListener('touchend', function (e) {
    if (!touch || !moved) {
      refreshEle.style.height = '0px';
      return;
    }
    CSS (refreshEle, 300 ); 
    pagePull = to false ;
     IF (the diff> moveDiff) { 
      refreshTxtEle.innerHTML = ' refresh ' ; 
      refreshEle.style.height = moveDiff + ' PX ' ; 
      the setTimeout (() => {
         // delay simulation Interface call 
        CSS (refreshEle, 300 ); 
        refreshEle.style.height = ' 0px ' ; 
        the setTimeout (() => { 
          pagePull =to true ; // control during the refresh repeated pulled down, no operation    
        }, 300 ); 
      }, 500 ); 
    } the else { 
      pagePull = to true ; 
      refreshEle.style.height = ' 0px ' ; 
    } 
  }, to false ) ; 


  function CSS (ELE, T) { 
    ele.style.transition = " All " + T + " MS " ; 
    ele.style.webkitTransition = " All " + T + " MS " ;
  }
</script>

</html>
js achieve the drop-down refresh function

Guess you like
