dropload手机端上拉刷新

转载 2016年08月30日 16:24:22

1、

使用方法

引用css和js

<link rel="stylesheet" href="../dist/dropload.min.css">
<script src="../dist/dropload.min.js"></script>
1.
2.
$('.element').dropload({
    scrollArea : window,
    loadDownFn : function(me){
        $.ajax({
            type: 'GET',
            url: 'json/more.json',
            dataType: 'json',
            success: function(data){
                alert(data);
                // 代码执行后必须重置
                me.resetload();
            },
            error: function(xhr, type){
                alert('Ajax error!');
                me.resetload();
            }
        });
    }
});

参数列表

参数 说明 默认值 可填值
scrollArea 滑动区域 绑定元素自身 window
domUp 上方DOM {
domClass : ‘dropload-up’,
domRefresh : ‘<div class=”dropload-refresh”>↓下拉刷新</div>’,
domUpdate : ‘<div class=”dropload-update”>↑释放更新</div>’,
domLoad : ‘<div class=”dropload-load”>○加载中…</div>’
}
数组
domDown 下方DOM {
domClass : ‘dropload-down’,
domRefresh : ‘<div class=”dropload-refresh”>↑上拉加载更多</div>’,
domUpdate : ‘<div class=”dropload-update”>↓释放加载</div>’,
domLoad : ‘<div class=”dropload-load”>○加载中…</div>’
}
数组
distance 拉动距离 50 数字
loadUpFn 上方function function(me){
//你的代码
me.resetload();
}
loadDownFn 下方function function(me){
//你的代码
me.resetload();
}

API

暴露一些功能,可以让dropload更灵活的使用

lock() 锁定dropload

unlock() 解锁dropload



2、

一些小问题:
(2) me.noData(); 和 me.noData(true); 表示当前无数据,也就是会在下方出现 (暂无数据)的表示
me.noData(false);则表示有数据,这时不会显示(暂无数据)

(2). 如果不希望用户继续加载数据则需要锁定,这时候需要用 me.lock(); 如果需要开放则需要 me.unlock();

有个比较麻烦的点是 :  你如果仅仅 me.unlock()了,其实你会发现无法下拉,为啥呢? 因为 me.noData(), 这里需要告诉dropload有数据了,继续吧, 所以需要调用 me.noData(false)


一楼的闭坑指南

http://wp.iyouths.org/352.html

相关文章推荐

文档dropload.js插件实现webApp网页上滑刷新下拉加载更多

文档说明需要引入的文件 $('div').dropload({ 滑动区域 s

dropload.js实现下滑加载更多分页功能

网上找了点例子.但一直遇到问题.下面是结合网上的例子改了点东西.实现的分页功能能.这里提一下我遇到的一个坑.其中css样式可能影响分页的效果.如果遇到不能分页.可以把css样式注释后试一下.如果分页可...

dropload插件的使用(上拉下滑加载数据)

1.导入js dropload.min.js zepto.min.js    2.后台查询 /** * 我找的劵 * * @return */ @Action("IFindT...

移动端下拉刷新、上拉加载更多插件dropload

参看 下载   https://github.com/pfan123/dropload 引用css和js html js内容 $('.element')...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

dropload.js+anjular实现的无线下拉。。。。

大众体育                                                 首页             足球     ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

dropload.js下拉加载应用

两种方式的css和引入的js,都一样 包含weui.dialog的用法: css部分: .ewm-dialog { position: fixed; z-index: 10;...
  • dddida
  • dddida
  • 2017年02月22日 16:40
  • 1903

混合开发中遇到的上拉刷新,下拉加载的问题

上拉加载遇到的问题:        iscroll: 可以实现上下拉刷新,加载,效果比较差,可是在页面上只能上下滑动,不能左右滑动,如果你的页面嵌入到客户端的tab底下,就会组织他们的左右滑动,  ...

利用dropload.min.js实现下拉分页

引入上dropload.min.js 在下拉的页面引用 $("#totalItem").val("${(paginator.totalItems)!'0'}"); ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dropload手机端上拉刷新
举报原因:
原因补充:

(最多只允许输入30个字)