1、引入

<link rel="stylesheet" href="/css/dropload.css" />
<script src="/js/dropload.min.js"></script>

2、html使用

<div class="hcoupon-img" id="couponList">
</div>

3、模板

<script id="couponListTemp" type="text/x-dot-template">

{{~it :v:i}}
<div class="hcoupon-list noUse1">
    <div class="list-content">
        <h3>￥{{=v.discountPrice}}代金券</h3>
        <p>使用條件：無限制</p>
        <p>有效截止日期：{{=v.getDate}}至{{=v.validityDate}}</p>
    </div>
</div>
{{~}}</script>

4、js使用

var pageNo=1; var PAGE_SIZE=5; var status=1; function getData(status){ pageNo=1; getCoupon(status,pageNo,PAGE_SIZE); }

$('.hcoupon-nav li').click(function(){
    $(this).addClass('active').siblings("li").removeClass('active');
})
function getCoupon(status,pageNo,pageSize,me){
    status=status;
    BaseTool.get("/mine/discount/list?status="+status+"&pageNo="+pageNo+"&pageSize="+PAGE_SIZE,function(e,b){
        var interText=doT.template($("#couponListTemp").html());
        if(b&& b.result&& b.result.list&& b.result.list.length){
            for(var i=0 ;i<b.result.list.length;i++){
                b.result.list[i].validityDate = b.result.list[i].validityDate.split(" ")[0];
                b.result.list[i].useDate = b.result.list[i].useDate.split(" ")[0];
                b.result.list[i].getDate = b.result.list[i].getDate.split(" ")[0];
            }
            // 加載
            var html=interText(b.result.list);
            $("#couponList").append(html);
            if(me&&me.resetload){
                // 每次數(shù)據(jù)加載完，必須重置
                me.resetload();
            }
        } else{
            if(me&&me.lock){
                if(!$("#couponList").html()){
                    var interError=doT.template($("#errorCourseList").html());
                    var html=interError();
                    $("#couponList").append(html);
                }
                //鎖定
                me.lock();
                //顯示無數(shù)據(jù)
                me.noData();
                // 每次數(shù)據(jù)加載完，必須重置
                me.resetload();
            }
        }
    },"json")
}

加載刷新的代碼：

//頁面拖拽加載數(shù)據(jù)（插件：dropload)
var dropload = $("#couponList").dropload({
    scrollArea:window,
    // 1 . 下拉刷新 回調(diào)函數(shù) （看結(jié)構(gòu)）
    loadUpFn : function(me){
        $.ajax({
            type: 'GET',
            // 每次獲取最新的數(shù)據(jù)即可
            url: './interface/page.php?pageNo=1',
            dataType: 'json',
            success: function(data){
                // $.ajax()雖接口提供json字符串，但接收到的是 json對(duì)象
                var result = '';
                // 循環(huán)拼接顯示內(nèi)容DOM
                // 刷新獲取多少數(shù)據(jù)，顯示多少 使用html()重置 lists DOM
                for(var i = 0; i < data.data.length; i++){
                    result += '<a class="item opacity" href="'+data.data[i].link+'">'
                                    +'[圖片上傳失敗...(image-e3cc7-1565666444350)]'
                                    +'<h3>hehe</h3>'
                                    +'<span class="date">'+data.data[i].id+'</span>'
                                +'</a>';
                }
                // 為測試，延遲1秒加載
                 setTimeout(function(){
                    // 插入加載使用 html() 重置 DOM
                    $('.lists').html(result);
                    // 每次數(shù)據(jù)加載完，必須重置
                    me.resetload();
                },1000);
            },
            // 加載出錯(cuò)
            error: function(xhr, type){
                alert('Ajax error!');
                // 即使加載出錯(cuò)，也得重置
                me.resetload();
            }
        });
    },
    //上拉加載更多 回調(diào)函數(shù)
    loadDownFn : function(me){
        getCoupon(status,pageNo++,PAGE_SIZE,me);
    },

以上不寫默認(rèn)為如下，自定義文本內(nèi)容加上以下

    // 下拉刷新模塊顯示內(nèi)容
   domUp : {
        domClass   : 'dropload-up',
        // 下拉過程顯示內(nèi)容
        domRefresh : '<div class="dropload-refresh">↓下拉過程顯示內(nèi)容-下拉刷新-自定義內(nèi)容</div>',
        // 下拉到一定程度顯示提示內(nèi)容
        domUpdate  : '<div class="dropload-update">↑釋放更新-自定義內(nèi)容</div>',
        // 釋放后顯示內(nèi)容
        domLoad    : '<div class="dropload-load"><span class="loading"></span>加載中-自定義內(nèi)容...</div>'
    },
    // 上拉加載更多
    domDown:{
        domClass : 'dropload-down',
        //滑動(dòng)到底部顯示內(nèi)容
        domRefresh : '<div class="dropload-refresh">↑上拉加載更多</div>',
        //內(nèi)容加載過程中顯示內(nèi)容
        domLoad :  '<div class="dropload-load"><span class="loading"></span>加載中...</div>',
        // 沒有更多內(nèi)容
        domNoData : '<div class="dropload-noData">暫無數(shù)據(jù)</div>'
    }
});

2017.1.17補(bǔ)充
上述代碼存在一個(gè)問題，就是請求接口多一次的問題，因?yàn)橹挥姓埱罅瞬胖烙袥]有下一頁。
解決：
根據(jù)接口提供的pages字段判斷共多少頁，若是大于pages就不再去請求
代碼：

Paste_Image.png