html5 加载下一页,html5上划实现分页加载

一.功能分析

当页面有许多相同类型数据需要加载，而且单个屏幕不足以显示这些内容，就需要使用分页加载方法，在手机客户端，一般都是使用上划下划的方式，为了有更好的用户体验，还需要在加载数据前，显示类似“加载中...”的提示，在数据加载完成后，隐藏加载提示。

二.滑动加载实现方法

1.实现方法1

可使用jQuery的scroll(滑动)事件来触发，用当前页面的总高度减去向上滑动的高度，如果小于当前浏览器窗口的高度，就表面页面已经被滑动到了最低端，这个时候就可以加载更多数据。代码如下：

html代码如下：

留言

发布

加载中...

js代码如下：

//页面拉到最下方,加载更多评论

$(window).scroll(function(){

if (isLoading == true) {

if (($("body").height() - $("body").scrollTop()) <= document.documentElement.clientHeight) {

$("#loading").show();

messagePage++;

getOnePageMessage(id ,messagePage);

}

}

});

function getOnePageMessage(id, page){

var onePageMessageTmp;

var messagePageCount;

isLoading = false;

$.ajax({

url : serverPrefix + "/wbLeaveMessage/getLeaveMessage",

type : "get",

dataType: "json",

data: {

wbId: id,

messageType: 1,

page: page,

pageSize: 10

},

success : function (data) {

if (data.code == 0){

messagePageCount = data.result.pageCount;

onePageMessageTmp = data.result.leaveMessages;

if ((onePageMessageTmp.length == 0) || (messagePageCount == 1)) { // 无数据或只有一页数据，隐藏加载提示

$("#loading").hide();

}

if (onePageMessageTmp.length != 0) {

addMessage(onePageMessageTmp);

isLoading = true;

}

}

else{

onePageMessageTmp.length = 0;

$("#loading").hide();

}

}

});

}

这种方法优点是代码简单易懂，好添加。缺点是页面向上滑动时，整个页面都在向上滚动，会看不到页面顶部的内容。我做的心愿漂流瓶项目的分页加载就是使用的上面这张方法。需要注意的是，在函数“getOnePageMessage()”中，ajax需要使用异步通信模式，否则会导致刷新页面时出现误加载两页数据的情况。页面地址：心愿漂流瓶。

加载提示的效果如下图所示：

经过上网查资料，通常加载提示应在ajax通信前显示，在ajax的success()或error()中隐藏。但是在我实际调试项目的过程中，发现这样操作等页面拉到最下端时，加载提示早就隐藏了，没有起到提示用户的作用，所以我换了一种方式，加载提示一直显示，只有页面拉到最低端时，用户能够明显看到加载提示，然后会加载新的分页，加载提示被新的分页挤到屏幕外面。当所有数据加载完成时，才隐藏加载提示。

2.实现方法2

为了有更好的分页加载效果，我在网上查了一些分页加载的插件，大家推荐最多的是iscroll.js这个插件，我把这个插件加入到我做的晒照片的项目中了，页面地址：晒照片。有兴趣的童鞋可以看看，这个插件的上拉下滑已经和IOS和android的效果差不多了。

html代码如下：

加载中...

加载中...

js代码如下：

var myScroll;

var distance = 30; //滑动距离

myScroll = new IScroll('#wrapper', {

probeType: 3,

mouseWheel: true,

preventDefault: false, // 添加此语句，点击事件才有效

});

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); // 无此语句，在微信中滑动页面较卡

// 上拉滑动事件

myScroll.on("slideUp",function(){

if(this.maxScrollY - this.y > distance){

if (listMethod == 0) {

if (newestPage < newestPageCount) {

newestPage++;

getNewestPlayersInfo(newestTimestamp, tId);

addPlayer(newestList, listMethod);

myScroll.refresh(); // 刷新后，页面才能向下滑动

}

if (newestPage == newestPageCount) {

$("#newest_scroller-pullUp").hide(); // 无数据或者加载完成后，隐藏加载提示

$("#newest-loading-gif").hide();

}

}

else {

if (rankingPage < rankingPageCount) {

rankingPage++;

getRankingPlayersInfo(rankingPage, tId);

addPlayer(rankingList, listMethod);

myScroll.refresh(); // 刷新后，页面才能向下滑动

}

if (rankingPage == rankingPageCount) {

$("#ranking_scroller-pullUp").hide(); // 无数据或者加载完成后，隐藏加载提示

$("#ranking-loading-gif").hide();

}

}

}

});

这个插件的优点是滑动效果美观，和原生ios、android相似。缺点是滑动时可见div层wrapper的高度是固定的，如果页面其它部分占用空间过大，导致wrapper元素高度较小，滑动起来的用户体验就不好，这也是为什么方法一用在心愿漂流瓶的项目，而这个方法用在晒照片的项目上。

加载提示的显示隐藏和方法1相同，默认处在底部导航栏的下方，页面向上滚动时，才会显示出来，当所有数据加载完成时，才隐藏加载提示。

三.iscroll.js的bug

安卓手机上划超出屏幕回弹失效的问题(待补充)。

苹果手机上划超出屏幕回弹失效的解决办法(待补充)。

本文来源于网络：查看 >https://blog.csdn/yangzhen06061079/article/details/52464794