上一篇文章我们介绍html5实现下拉无限加载数据的其中一种方法，今天我们介绍实现这种效果的第二个方法。
为了有更好的分页加载效果，我在网上查了一些分页加载的插件，大家推荐最多的是iscroll.js这个插件，我把这个插件加入到我做的晒照片的项目中了，页面地址：晒照片。有兴趣的童鞋可以看看，这个插件的上拉下滑已经和IOS和android的效果差不多了。
html代码如下：
<!--选手列表，使用js动态加载--> <div id="wrapper"> <div id="scroller"> <div class="newest"> <div class="newestPlayers"></div> <img id="newest-loading-gif" class="loading-gif" src="/vote/imgs/sourceImgs/loading_1shi.gif"> <div id="newest_scroller-pullUp" class="scroller-pullUp"> <span class="pull-up-msg">加载中...</span> </div> </div> <div class="ranking" style="display: none;"> <div class="rankingPlayers"></div> <img id="ranking-loading-gif" class="loading-gif" src="/vote/imgs/sourceImgs/loading_1shi.gif"> <div id="ranking_scroller-pullUp" class="scroller-pullUp"> <span class="pull-up-msg">加载中...</span> </div> </div> </div> </div>
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相同，默认处在底部导航栏的下方，页面向上滚动时，才会显示出来，当所有数据加载完成时，才隐藏加载提示。
通过以上内容我们知道了html5如何实现下拉无限加载数据的效果？感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！
