原生js下拉刷新、上拉加载效果完成（附代码）
时间：2024/5/28作者：未知来源：争怎路由网人气：
- 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。本篇文章给大家带来的内容是关于原生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> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536127130721&di=f192c5e1749dd2aa73b8a5b7297bd0cc&imgtype=0&src=http%3A%2F%2Fs10.sinaimg.cn%2Fmiddle%2F4ac1551583fc20f4db299%26690" alt=""> <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关键词：原生js下拉刷新、上拉加载效果完成（附代码）