当页面有许多相同类型数据需要加载，而且单个屏幕不足以显示这些内容，就需要使用分页加载方法，在手机客户端，一般都是使用上划下划的方式，为了有更好的用户体验，还需要在加载数据前，显示类似“加载中...”的提示，在数据加载完成后，隐藏加载提示。今天我们就来看看在html5页面中如何实现这个效果。
无限加载数据的实现方法
可使用jQuery的scroll(滑动)事件来触发，用当前页面的总高度减去向上滑动的高度，如果小于当前浏览器窗口的高度，就表面页面已经被滑动到了最低端，这个时候就可以加载更多数据。代码如下：
html代码如下：
<div class="mod comment"> <div class="head"> <i class="icon icon-comment-o"></i>留言 </div> <div class="body"> <textarea id="dome" class="commentArea"></textarea> <div class="addMessageBtn">发布</div> <div style="clear: both;"></div> <ul class="commentList"></ul> </div> </div> <div id="loading" style="position:relative;"> <img class="loading-gif" src="/wishDriftBottle/imgs/sourceImgs/loading_bg_transparent.gif"> <div class="loading-text">加载中...</div> </div>
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()中隐藏。但是在我实际调试项目的过程中，发现这样操作等页面拉到最下端时，加载提示早就隐藏了，没有起到提示用户的作用，所以我换了一种方式，加载提示一直显示，只有页面拉到最低端时，用户能够明显看到加载提示，然后会加载新的分页，加载提示被新的分页挤到屏幕外面。当所有数据加载完成时，才隐藏加载提示。
通过以上内容我们知道了html5如何实现下拉无限加载数据的效果？感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！
