关于H5移动端页面的上拉加载更多的原生实现

我们知道在移动端的分页处理 都是上拉加载更多；这样的交互更加的友好;下面来简单的讲讲 实现的原理：

这个原理很简单 ；就是页面到达最底部了，那么就去执行请求数据加载，把新得到的数据加载到分页里去；

我们怎么来判断是否到底部了呢？

观察右边的滚动条 ：   滚动条的高度（等于浏览器窗口的高度）+他的上下留白 ===页面的总高；

而页面到底的状态是滚动条的高度（等于浏览器窗口的高度）+滚动条到顶部的距离===页面的总高度；

如果 一旦等于或者大于那么我们就知道页面到底了，该执行加载动作了；代码的实现就是（这边就不写兼容写法了，只阐述原理）：

1，得到滚动条到顶部的距离

 scrollTop = document.body.scrollTop;

2，得到 滚动条的高度（等于浏览器窗口的高度）

 clientHeight =document.body.clientHeight

3，得到页面的高度

 pageHeight=document.body.scrollHeight

那么 他们在

scrollTop+clientHeight>=pageHeight

的时候就说明到达页面的底部了 这个时候就应该去触发加载事件了，但是这个时候又需要滚动事件去触发；所以

window.scroll=function(){

if( scrollTop+clientHeight>=pageHeight){  

       //这个位置去加载更多的数据；或者进一步判断是否有分页可以加载；

}

}

以上就是关于 移动端上拉加载更多的基本原理；可以在这个基础上继续添加新的元素是功能看起来更加的饱满