上一篇文章我们介绍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)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!