生活随笔
收集整理的这篇文章主要介绍了
原生JS实现下拉刷新（移动端）
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
原生JS实现下拉刷新（移动端）
- 主要利用touchstart、touchmove、touchend事件
- 结合CSS定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title>
</head>
<style>* {padding: 0;margin: 0;}.box {position: absolute;top: 0;left: 0;height: 100%;width: 100%;}.list {position: relative;top: 0;width: 100%;}.list li {list-style-type: none;width: 100%;height: 35px;line-height: 35px;text-align: center;}
</style>
<body><div class="box"><ul class="list"><li>1111
</li><li>2222
</li><li>3333
</li><li>4444
</li></ul></div><script>const box = document.querySelector('.box')const list = document.querySelector('.list')let touchStartPosition = 0box.addEventListener('touchstart', function (e) {let touch = e.touches[0]touchStartPosition = touch.pageY})box.addEventListener('touchmove', function (e) {let touch = e.touches[0]list.style.top = list.offsetTop + touch.pageY - touchStartPosition + 'px'touchStartPosition = touch.pageY})box.addEventListener('touchend', function (e) {let top = list.offsetTopif (top > 70) {console.log('刷新')} if (top > 0) {let timer = setInterval(() => {list.style.top = top-- + 'px'if (top <= 0) {clearInterval(timer)}})}})</script>
</body>
</html>
总结
以上是生活随笔为你收集整理的原生JS实现下拉刷新（移动端）的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
