dropload.min.js下拉刷新,上拉加载插件

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){
                // 每次数据加载完，必须重置
                me.resetload();
            }
        } else{
            if(me&&me.lock){
                if(!$("#couponList").html()){
                    var interError=doT.template($("#errorCourseList").html());
                    var html=interError();
                    $("#couponList").append(html);
                }
                //锁定
                me.lock();
                //显示无数据
                me.noData();
                // 每次数据加载完，必须重置
                me.resetload();
            }
        }
    },"json")
}

---

加载刷新的代码：

//页面拖拽加载数据（插件：dropload)
var dropload = $("#couponList").dropload({
    scrollArea:window,
    // 1 . 下拉刷新 回调函数 （看结构）
    loadUpFn : function(me){
        $.ajax({
            type: 'GET',
            // 每次获取最新的数据即可
            url: './interface/page.php?pageNo=1',
            dataType: 'json',
            success: function(data){
                // $.ajax()虽接口提供json字符串，但接收到的是 json对象
                var result = '';
                // 循环拼接显示内容DOM
                // 刷新获取多少数据，显示多少 使用html()重置 lists DOM
                for(var i = 0; i < data.data.length; i++){
                    result += '<a class="item opacity" href="'+data.data[i].link+'">'
                                    +'![]('+data.data[i].pic+')'
                                    +'<h3>hehe</h3>'
                                    +'<span class="date">'+data.data[i].id+'</span>'
                                +'</a>';
                }
                // 为测试，延迟1秒加载
                 setTimeout(function(){
                    // 插入加载使用 html() 重置 DOM
                    $('.lists').html(result);
                    // 每次数据加载完，必须重置
                    me.resetload();
                },1000);
            },
            // 加载出错
            error: function(xhr, type){
                alert('Ajax error!');
                // 即使加载出错，也得重置
                me.resetload();
            }
        });
    },
    //上拉加载更多 回调函数
    loadDownFn : function(me){
        getCoupon(status,pageNo++,PAGE_SIZE,me);
    },

---

以上不写默认为如下，自定义文本内容加上以下

    // 下拉刷新模块显示内容
   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>'
    }
});

2017.1.17补充
上述代码存在一个问题，就是请求接口多一次的问题，因为只有请求了才知道有没有下一页。
解决：
根据接口提供的pages字段判断共多少页，若是大于pages就不再去请求
代码：

Paste_Image.png