下拉式更新基本原理如下:
检查浏览器滚条的事件,当滚动条接近文档的大小时,异步与后台交互。
ps:后台准备,其实就是分页查询,第一次访问时,以json格式返回一页的数据。
无论是提交还是接受的数据,都有js完成。其中运用到ajax。
在这里就不用原始的js,我就采用JQuery,因为它封装了ajax,并且提供强大的选择器
废话不多,显示主要源码
window.jheight = 1000; //文档document大小,初始值为1000,预防第一次访问时就达到下拉式更新的条件,及滚动条到达文档的大小。不同屏幕大小,初始值有所变化
$(document).ready(function(){ window.onscroll = doScroll; //注册滚动条事件 })
//下拉刷新 function doScroll() { if (window.pageYOffset >= jheight - 664) { var url = "http://localhost:8080/TreasureWeb/treasureAction_homeData.do"; pNum++; $.getJSON(url, {pageNum : pNum}, function(jsonData) { if (!jsonData) return; loadData(jsonData.dealBean.recordList, null, null); //加载list数据 }); } }