移动端上滑加载更多(H5)

背景:

    项目的移动端需要弄一个上滑加载更多的效果,达到分页效果。。

     我的第一想法去网上找个插件直接弄上,想法是好的,现实是残酷的。。网上找的不是乱七八糟的

就是一些有名的插件太大了,我一个小功能显得太臃肿。。而且关键页面早就弄好了,用上插件各种

不兼容,重新调页面那就工程太大了。所以自己写个简单上滑。。

 

原理:

 

scrollHeight即真实内容的高度;

clientHeight比较好理解,是视窗的高度,就是我们在浏览器中所能看到内容的高度;

scrollTop是视窗上面隐藏掉的部分。

 

移动端上滑加载更多(H5)_第1张图片

 

1 如果真实的内容比视窗高度小,则一直加载到超过视窗,

2 如果上滑红色部分没有了  那不就是到底部了么???(最直接的判断不就是 :scrollTop+可视部分(设备高度)==文档(真是高度)

 就是滑到了底部了。

 

代码:

样式和业务逻辑自己写下吧。。。。职场小白有错欢迎指出  谢谢

 

 

你可能感兴趣的:(移动端上滑加载更多(H5))