生活随笔
收集整理的這篇文章主要介紹了
原生JS实现下拉刷新（移动端）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
原生JS實現(xiàn)下拉刷新（移動端）
- 主要利用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实现下拉刷新（移动端）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
