【Demo】教你实现下拉刷新

前言

第三方库很常见，我们开发需求的时候经常会用到下拉刷新组件，如果要我们自己实现下拉刷新该如何实现尼？

效果

实现原理

1、监听 touchstart事件记录初始startY

2、监听 touchmove事件 e.touches[0].pageY - startY得到 deltaY， 再通过transform: translateY(deltaY) 来拖动内容

3、监听 touchend 事件 触发回调

代码

1、html

<div class="pull-refresh">
  <div id="pull-refresh-container">
    
    <div class="pull-refresh-head">
      <p class="pull-refresh-text"></p>
    </div>
    
    <div class="pull-refresh-content">
      <ul>
        <li>1</li>   
        <li>2</li> 
        <li>3</li> 
        <li>4</li> 
        <li>5</li> 
        <li>6</li> 
      </ul>
    </div>
  </div>
</div>

2、css

html, body {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  background-color: white;
}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}

.pull-refresh {
  width: 100%;
  height: 100%;
}

#pull-refresh-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #F5F5F5;
}

.pull-refresh-head {
  position: absolute;
  left: 0;
  width: 100%;
  transform: translateY(-100%);
}

.pull-refresh-text {
  text-align: center;
}

.pull-refresh-content {
  text-align: left;
  padding: 24px;
}

3、js

(function(){
  
  var refreshContainer = document.getElementById("pull-refresh-container"),
      refreshTxt = document.querySelector('.pull-refresh-text'),
      startY = 0, 
      deltaY = 0,
      slowY = 0;
  
  refreshContainer.addEventListener('touchstart',function(e){
    startY = e.touches[0].pageY;
    refreshContainer.style.transition = 'transform 0s';
  }, false);
  
  
  refreshContainer.addEventListener('touchmove',function(e){
    e.preventDefault();
    deltaY = e.touches[0].pageY - startY;
    
    if(deltaY > 0) {
      refreshTxt.innerText = '下拉刷新';
      if(deltaY > 60) {
        refreshTxt.innerText = '释放刷新';
        slowY = (deltaY - 60) * 0.2 + 60;
      } else {
        slowY = deltaY
      }
      refreshContainer.style.transform = 'translateY('+ slowY + 'px)';
    }
  }, false);
  
  
  refreshContainer.addEventListener('touchend',function(e){
    refreshContainer.style.transition = 'transform 0.5s ease 0s';
    if(deltaY > 60) {
      refreshContainer.style.transform = 'translateY(60px)';
      refreshTxt.innerText = '加载中...';

      setTimeout(function(){
        refreshContainer.style.transform = 'translateY(0px)';
        refreshTxt.innerText = '刷新成功';
      }, 2000)
    } else {
      refreshContainer.style.transform = 'translateY(0px)';
    }
    
    startY = 0;
    deltaY = 0;
    slowY = 0;
  }, false);
  
})()

在线预览

点我预览