分页功能的实现方法
在开发过程中经常会用到分页的功能,除了引用插件外,也可以使用最简单的方式来实现这个功能。下面分享一下我在项目中使用到的分页方法,非常的容易理解和操作,当然,如果觉得效果太一般了,那么使用iScroll.js或者updown.js都可以实现更加炫酷的效果。
下面介绍下使用jQuery实现分页的代码
引用jQuery
<script src="js/jquery.min.js"></script>
实现代码(html)
<article id="content">
<div id="content-list">
</div>
</article>
实现代码(js)
$(function() {
$('#content').scroll(function(){
var scrollTop = $('#content').scrollTop(); //获取窗口的滑动距离
var scrollHeight = $('content-list').height(); //获取可视屏幕和超出的页面部分
var windowHeight = $('content').height(); //获取窗口的高度
//这里计算方案是窗口的高度 + 滑动的距离 = 总高度的话那么就加载下一页
if(scrollTop + windowHeight >== scrollHeight) {
//更新下一页
}
});
});
如果已经加载完了所有的数据,那么可以使用下面的代码来取消绑定
$('#content').unbind('scroll');
可以使用下面的代码来快速的回到顶部
$('#content').scrollTop(0);
除了使用jQuery之外,还可以使用原生的JavaScript来实现功能,只需要修改选择器和获取高度的方法就行了。