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

你可能感兴趣的:(javascript)