php分页滑动,移动端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);

}

适合移动端、PC端页面下拉 滚动分页

方法二(推荐)：

下载插件，引用css 和 js：

@section scripts{

$(function () {

var page = 1;

var pageSize = 10;

$(".content").dropload({

scrollArea: window,

loadDownFn: function (me) {

page++;

var result = '';

$.ajax({

url: "@Url.Action("GetEmployeeData", "Home")",

type: "GET",

data: { "pageNum": page },

success: function (data) {

var arrlen = data.length;

if (arrlen > 0) {

showContent(data);

me.resetload();

} else {

me.lock();

me.noData();

}

},

error: function (xhr, type) {

alert('Ajax error:' + xhr + type);

me.resetload();

}

})

}

})

});

function showContent(datacontent) {

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

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。