本篇文章给大家带来的内容是关于原生js下拉刷新、上拉加载效果实现(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
在控制台切换到移动端就可以看效果了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } .header { position: fixed; left: 0; top: 0; width: 100%; height: 60px; background: pink; line-height: 60px; text-align: center; color: white; } .content { width: 200px; height: 1000px; border: 2px solid green; background: linear-gradient(#fff, #000); -webkit-flex-shrink: 0; flex-shrink: 0; margin: 60px auto 0; } img { width: 100%; height: 180px; position: absolute; top: 60px; left: 0; display: none; z-index: -1 } p{ line-height: 30px; text-align: center; display: none } </style> </head> <body> <div> <div>首页</div> @@##@@ <div></div> <p>加载中...</p> </div> <script> var oImg = document.getElementsByTagName('img')[0]; var oP=document.getElementsByTagName('p')[0]; var oHeader = document.getElementsByClassName('header')[0]; var oContent = document.getElementsByClassName('content')[0]; var screenH = document.documentElement.clientHeight || document.body.clientHeight; var startY, moveY; oContent.addEventListener('touchstart', (e) => { startY = e.touches[0].pageY; }) oContent.addEventListener('touchmove', (e) => { moveY = e.touches[0].pageY - startY; }); oContent.addEventListener('touchend', () => { if (moveY > 0) {//下拉 oImg.style.display = 'block'; if (moveY > 180) moveY = 180; oContent.style.marginTop = moveY + oHeader.clientHeight + 'px'; //刷新数据后再走下面的 var timer = setInterval(() => { moveY -= 1; if (moveY <= 0) { oImg.style.display = 'none'; clearInterval(timer); moveY = 0 } oContent.style.marginTop = moveY + oHeader.clientHeight + 'px'; }, 4) } else {//上拉 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop + screenH + 20 >= oContent.scrollHeight) { oP.style.display='block' //加载下条数据 setTimeout(() => { oP.style.display='none' oContent.style.height = oContent.clientHeight + 300 + 'px' }, 500) } } }) </script> </body> </html>
以上就是对原生js下拉刷新、上拉加载效果实现(附代码)的全部介绍,如果您想了解更多有关JavaScript视频教程,请关注PHP中文网。
以上就是原生js下拉刷新、上拉加载效果实现(附代码)的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号