文件說明

需要引入的檔案
<script src="js/zepto.min.js"></script>
<script src="js/dist/dropload.min.js"></script>
<link rel="stylesheet" href="js/dist/dropload.css">

$('div').dropload({
            滑動區域
            scrollArea: window,

            定義上方樣式
            domUp: {
                domClass: "dropload-up",
                domRefresh: '<div
 
 class="dropload-refresh">↓下拉重新整理</div>',
                domUpdate: '<div class="dropload-update">↑釋放更新</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>重新整理中...</div>'

            定義下方樣式
            domDown: {
                domClass: "dropload-down",
                domRefresh: '<div
 
 class="dropload-refresh">↑上拉載入更多</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>載入中...</div>',
                domNoData: '<div class="dropload-noData">暫無資料</div>'
            },

            是否自動載入

            觸發dropload的最小滑動距離
            distance: 50,

            提前載入距離
            threshold: "",

            下拉重新整理方法
            loadUpFn: function(me){

                window.reload();

                重置dropload
                me.resetload();
            },

            上滑載入更多方法
            loadDownFn: function(me){

                請求載入資料
                $.ajax({

                    當資料全部請求完時鎖定dropload
                    lock(up/down);//up鎖定下拉操作 down鎖定上滑操作 不填全部鎖定
                    noData(true/false);//沒有更多資料
                });

                重置dropload
                me.resetload();

            }

});
 

頁面程式碼

<script src="js/jquery-2.0.0.min.js"></script>
<script src="js/zepto.min.js"></script>
<script src="js/juicer-min.js"></script>
<script src="js/dist/dropload.min.js"></script>
<link rel="stylesheet" href="js/dist/dropload.css">

<div id="topiclist">
    <!-- 模板開始 -->
    <script type="text/juicer" id="TemplateArtOne">
        <div class="huatitle">
            <div class="canyur" style="margin-top:-10px;">
                <div class="canyurl">
                    <p style="float:left;">${commentnum+likenum}人蔘與</p>
                </div>
                <div class="canyurr">
                    <p>${time}</p>
                </div>
            </div>
            <div class="biaoti">
                <h4>${title}</h4>
            </div>
            <div class="neir">
                <p>$${content}</p>
            </div>      
        </div>
    </script>
    <!-- 模板結束 -->
</div>

<div id="m4" class="c858"
        style="margin: 10px 0;text-align: center;display:none;">網路比較慢，請重新嘗試...</div>
    <div id="m2" class="c858"
        style="margin: 10px 0px; text-align: center; display: none;">
        <img src="img/loading.gif" alt="">正在載入...
    </div>
    <div id="m3" class="c858" style="margin: 10px 0px; text-align: center;">已載入全部資料</div>

js程式碼

var page = 0;//頁數

//dropload 
$('#topiclist').dropload({
      //滑動區域
      scrollArea : window,
      //下部樣式
      domDown : {
          domClass   : 'dropload',
          domRefresh : '<div class="dropload-refresh">↑上拉載入更多</div>',
          domUpdate  : '<div class="dropload-update">↓釋放載入</div>',
          domLoad    : '<div class="dropload-load"><span class="loading"></span>載入中...</div>'
      },                      
      //下部方法
      loadDownFn : function(me){                    
           page++;//頁數加1
           $.ajax({
                url:'topicServlet',
                type:'get',
                dataType:'json',
                data:{"page":page}, 
                success: function (data) {

                    var artlist = data.topicList;
                    var len = artlist.length;                               
                    for (var i = 0; i < len; i++) {
                        var tpl = document.getElementById('Temp').innerHTML;//獲取模板物件
                        var html = juicer(tpl, artlist[i]);//巢狀
                        $("#topiclist").append(html);
                    }

                    if (len < 20) {//表示資料全部載入完（一頁20條）                   
                        $("#m2").hide();//隱藏正在載入
                        $("#m3").show();//顯示全部載入完
                        $("#m4").hide();//隱藏網路異常
                        me.lock();//鎖定上拉下拉操作
                        me.noData();//無資料
                    }                                   
                },
                error:function (e) {
                    $("#m2").hide();//隱藏正在載入
                    $("#m3").hide();//隱藏全部載入完
                    $("#m4").show();//顯示網路異常
                    console.log('錯誤'+e);
                }
            });//ajax()方法結束

            setTimeout(function(){
                me.resetload();//每次資料載入完都要重置（dropload的方法）
            },1000);

      }//loadDownFn()方法結束
});//dropload()方法結束