<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> <style type="text/css"> html,body,header,div,main,p,span,ul,li{ margin: 0; padding: 0; } #refreshContainer li{ background-color: #eee; margin-bottom: 1px; padding: 20px 10px; } .refreshText{ position: absolute; width: 100%; line-height: 50px; text-align: center; left: 0; top: 0; } </style> </head> <body> <main> <p class="refreshText"></p> <ul id="refreshContainer"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul> </main> <script type="text/javascript"> (function(window) { var _element = document.getElementById('refreshContainer'), _refreshText = document.querySelector('.refreshText'), _startPos = 0, _transitionHeight = 0; _element.addEventListener('touchstart', function(e) { console.log('初始位置:', e.touches[0].pageY); _startPos = e.touches[0].pageY; _element.style.position = 'relative'; _element.style.transition = 'transform 0s'; }, false); _element.addEventListener('touchmove', function(e) { console.log('当前位置:', e.touches[0].pageY); _transitionHeight = e.touches[0].pageY - _startPos; if (_transitionHeight > 0 && _transitionHeight < 60) { _refreshText.innerText = '下拉刷新'; _element.style.transform = 'translateY('+_transitionHeight+'px)'; if (_transitionHeight > 55) { _refreshText.innerText = '释放更新'; } } }, false); _element.addEventListener('touchend', function(e) { _element.style.transition = 'transform 0.5s ease 1s'; _element.style.transform = 'translateY(0px)'; _refreshText.innerText = '更新中...'; // todo... }, false); })(window); </script> </body> </html>
原生JS移动端实现: 下拉刷新
最新推荐文章于 2024-07-12 08:49:54 发布