【Demo】教你实现下拉刷新

最新推荐文章于 2024-05-15 09:26:37 发布

GuoguoDad~

最新推荐文章于 2024-05-15 09:26:37 发布

阅读量835

点赞数 6

分类专栏：前端开发文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/DuoguoDad/article/details/127850549

版权

前端开发专栏收录该内容

11 篇文章 5 订阅

订阅专栏

前言

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

效果

实现原理

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;
  
  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 = '下拉刷新';
      refreshContainer.style.transform = 'translateY('+ deltaY + 'px)';
      
      if(deltaY > 60) {
        refreshTxt.innerText = '释放刷新';
      }
    }
  }, 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;
  }, false);
  
})()