原生js如何实现上拉加载下拉刷新

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）,并添加过渡动画