html5实现下拉加载

介绍：

   实现手机下拉自动加载数据。

原理：

   通过检测页面内容距离加上当前滚动的距离大于或等于滚动距离总长时，调用ajax数据加载

事例：

var myMoreInfo = new iMoreInfo();
$(document).ready(function() {
    var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
    var nScrollTop = 0;   //滚动到的当前位置
    var nDivHight = $("#mainPanel").height();//页面距离
    $("#mainPanel").scroll(function() {
        nScrollHight = $(this)[0].scrollHeight;
        nScrollTop = $(this)[0].scrollTop;
        if (nScrollTop + nDivHight>= nScrollHight)
            myMoreInfo.ajax();
    });
});

 

2、初始化数据

function newsMonoScrollRefresh(category_id) {
    if (!category_id) category_id = 0;
    myMoreInfo.lister = ".listview";
    myMoreInfo.page = 2;
    myMoreInfo.url = config.webpath + "tools/user_ajax.ashx?action=get_article_list&channel=news&category_id=" + category_id;
    myMoreInfo.href = "/" + site.build_path + "/news_show.aspx";
    myMoreInfo.templateskin = templateskin;
    myMoreInfo.view = moreInfoNewsMono;
}

3、通过初始化数据，实现下拉加载信息

function iMoreInfo() {
    this.myScroll={};
    this.lister=".listview";
    this.page=1;
    this.url="";
    this.href="";
    this.templateskin="";
    this.setParm=function(parm,parmiScroll){
         if(parmiScroll) this.myScroll=parmiScroll;
         if(parm.lister) this.lister=parm.lister;
         if(parm.page && this.page<parm.page) this.page=parm.page;
         if(parm.url) this.url=parm.url;
         if(parm.href) this.href=parm.href;
         if(parm.templateskin) this.templateskin=parm.templateskin;
         //if(parmiScroll)parmiScroll.myScroll.refresh();
        return this;
     }
    this.view=moreInfoNews;
    this.dr={};
    this.ajax=function(){
         myMoreInfo=this;
        $.ajax({
            success: function (str, data) {
                str = jQuery.parseJSON(str);
                if (str.status == "1") {
                    for (var i = 0; i < str.data.ds.length; i++) {
                        myMoreInfo.dr=str.data.ds[i];
                        $(myMoreInfo.lister).append(myMoreInfo.view());//下拉添加html模版
                    }
                    myMoreInfo.page =myMoreInfo.page +1;
                    try {
                        if (myMoreInfo.myScroll) myMoreInfo.myScroll.myScroll.refresh();
                    } catch (e) {
                    }
                }
                else {}
            },
            error: function (error) { },
            url: myMoreInfo.url+'&page=' + myMoreInfo.page, /*设置post提交到的页面*/
            type: "post", /*设置表单以post方法提交*/
            dataType: "text" /*设置返回值类型为文本*/
         });
    };
}


//html模版

function moreInfoNewsMono() {
    var viewString = "<li><img id='imgmono'  src="+this.dr.img_url+"><a id='a_mono'  href="+this.href+"?id="+this.dr.id+" data-ignore=true>";
    viewString = viewString + "<p>" + this.dr.title + "</p><div class="note"><p>" + this.dr.zhaiyao + "</p>";
    viewString = viewString + " <p style='margin-top: 7px'><i class="hot"><img style='width: 13px' src='"+this.templateskin+"/images/icons/view.png'>" + this.dr.click + "</i>";
    viewString = viewString + "<i class='date'>" + this.dr.add_time + "</i></p></div></a></img></li>";
    return viewString;
}