### 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;
}
~~~
