移动端ajax滑动分页,移动端web滚动分页的实现方法

本文实例为大家分享了移动端web滚动分页展示的具体代码，供大家参考，具体内容如下

方法一：前端代码：

var page = 2; //当前页的页码

var flagNoData = false; //false

var allpage = @Model.PageCount; //总页码，会从后台获取

function showAjax(currentIndex) {

$.ajax({

url: "@Url.Action("GetEmployeeData","Home")",type: "GET",data: {"pageNum":currentIndex},success: function (data) {

//要执行的内容

showContent(data);

if (currentIndex >= allpage) { //当前页码大于等于总页码

flagNoData = true;

};

page += 1; //页数加1

}

})

}

function scrollFn() {

//真实内容的高度

var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);

//视窗的高度

var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;

//隐藏的高度

var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

if (flagNoData) { //数据全部加载完了

return;

} else if (pageHeight - viewportHeight - scrollHeight < 10) { //如果满足触发条件，执行

showAjax(page);

}

}

$(window).bind("scroll",scrollFn); //绑定滚动事件

function showContent(datacontent)

{

$("#contentDiv").append(datacontent);

}