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

1、引入

2、html使用

3、模板

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

---

加载刷新的代码：

//页面拖拽加载数据（插件：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 += ''
                                    +'[图片上传失败...(image-e3cc7-1565666444350)]'
                                    +'
hehe
'
                                    +''+data.data[i].id+''
                                +'';
                }
                // 为测试，延迟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 : '
↓下拉过程显示内容-下拉刷新-自定义内容
',
        // 下拉到一定程度显示提示内容
        domUpdate  : '
↑释放更新-自定义内容
',
        // 释放后显示内容
        domLoad    : '
加载中-自定义内容...
'
    },
    // 上拉加载更多
    domDown:{
        domClass : 'dropload-down',
        //滑动到底部显示内容
        domRefresh : '
↑上拉加载更多
',
        //内容加载过程中显示内容
        domLoad :  '
加载中...
',
        // 没有更多内容
        domNoData : '
暂无数据
'
    }
});

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

Paste_Image.png