【Demo】教你实现下拉刷新

article/2025/10/26 18:20:06

前言

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

效果

实现原理

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);})()