html5上划实现分页加载

一.功能分析

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

二.滑动加载实现方法

1.实现方法1

可使用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()中隐藏。但是在我实际调试项目的过程中，发现这样操作等页面拉到最下端时，加载提示早就隐藏了，没有起到提示用户的作用，所以我换了一种方式，加载提示一直显示，只有页面拉到最低端时，用户能够明显看到加载提示，然后会加载新的分页，加载提示被新的分页挤到屏幕外面。当所有数据加载完成时，才隐藏加载提示。

2.实现方法2

  为了有更好的分页加载效果，我在网上查了一些分页加载的插件，大家推荐最多的是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相同，默认处在底部导航栏的下方，页面向上滚动时，才会显示出来，当所有数据加载完成时，才隐藏加载提示。

三.iscroll.js的bug

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

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