当前位置: 代码迷 >> Web前端 >> 上拉式更新
  详细解决方案

上拉式更新

热度:310   发布时间:2012-11-25 11:44:31.0
下拉式更新
下拉式更新基本原理如下:
    检查浏览器滚条的事件,当滚动条接近文档的大小时,异步与后台交互。

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数据
 });
 }
}


  相关解决方案