1.上拉加载
使用场景：移动端历史日志、内容列表等模块中使用
简述：当列表滑动到底部时，再做请求加载下一页列表，有利于减少http请求和浏览器渲染压力，提高页面首次加载速度
原理：
获取滑动内容外部盒子高度：document.querySelector(".container").clientHeight
获取整个内容的高度：document.querySelector(".ul").scrollHeight
获取卷曲出去的高度：let tops = document.querySelector(".container").scrollTop
外部盒子高度+卷曲出去的高度>=内容的高度 - 离底部距离高度（自定义）
监听滑动事件scroll 当满足以上条件时执行异步请求，这里需要加一个节流，当触发是禁止再次触发，等到异步事件加载完毕后，才允许再次上拉触发。
2.下拉刷新
简述：向下滑动页面刷新数据
原理：
监听touchstart、touchmove、touchend三个事件
通过touchstart记录手指触摸时位置
通过touchmove记录向下滑动的距离，同时通过设置transform：translateY（x）来设置内容向下移动，控制滑动距离到达某个值时，禁止页面再做滑动
通过touchend记录手指离开事件，对滑动距离达到限定值时，做刷新请求数据处理，未到限定值时自动回弹translateY（0px）,并添加过渡动画
完整代码
<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } .container{ width: 100vw; height: 100vh; overflow: scroll; } .ul li{ width: 100%; height: 70px; line-height: 70px; border-bottom: 1px solid #000000; text-align: center; } .tip{ width: 100%; text-align: center; height: 80px; line-height: 80px; position: absolute; top: 0; left: 0; } </style> <body> <div class="container"> <p class="p"></p> <ul class="ul"> </ul> </div> </body> <script type="text/javascript"> init() function init(){ for(let i=1;i<=10;i++){ var bd = document.createElement("li"); bd.innerHTML = i document.querySelector(".ul").appendChild(bd) } } //上拉加载 let hook = true document.querySelector(".container").addEventListener("scroll",function(){ let Height = document.querySelector(".container").clientHeight let height = document.querySelector(".ul").scrollHeight let tops = document.querySelector(".container").scrollTop if(Height+tops >= height-50 && hook){ hook = false console.log("添加数据") for(let i=1;i<=10;i++){ var bd = document.createElement("li"); bd.innerHTML = i document.querySelector(".ul").appendChild(bd) } hook = true } }) //下拉刷新 var stratX = null var endX = null document.querySelector(".container").addEventListener("touchstart",function(e){ if(this.scrollTop == 0){ stratX = e.touches[0].clientY } }) document.querySelector(".container").addEventListener("touchmove",function(e){ if(this.scrollTop == 0){ endX = e.touches[0].clientY-stratX if(endX<100){ document.querySelector(".ul").style.transition = 'transform 0s ease'; document.querySelector(".ul").style.transform = 'translateY('+endX+'px)' } } }) document.querySelector(".container").addEventListener("touchend",function(){ if(endX<100){ document.querySelector(".ul").style.transition = 'transform 0.5s ease'; document.querySelector(".ul").style.transform = 'translateY(0px)' return false } document.querySelector(".p").innerHTML = "加载中..."; document.querySelector(".p").classList.add("tip") setTimeout(()=>{ while (document.querySelector(".ul").hasChildNodes()) { document.querySelector(".ul").removeChild(document.querySelector(".ul").firstChild); } init() document.querySelector(".ul").style.transition = 'transform 0.5s ease'; document.querySelector(".ul").style.transform = 'translateY(0px)' document.querySelector(".p").innerHTML = ""; document.querySelector(".p").classList.remove("tip") },2000) }) </script></html>
结束！
