当然本例子采用的是jquery库,后期会做成原生js。
本例的数据调用的是锋利的jquery一书提供的一段json。
首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height();
再给window绑定scroll事件。所以整个页面demo可以这样做:
复制代码 代码如下:
* { margin:0; padding:0;}
body { font-size:12px;}
p{ margin: 5px;}
.box{ padding: 10px;}
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
拉到底部就是实现异步数据加载了,当然了,实际项目还要加上如果没数据了要怎么显示,怎么操作。这些加判断就行了。



