移动端下拉刷新、上拉加载更多插件
Latest commit 50d5776 Dec 5, 2016 @ximan 0.9.1
Permalink
Failed to load latest commit information.
dist 0.9.1 Dec 5, 2016
examples 0.9.1 Dec 5, 2016
.gitignore 提交v0.1.0 Oct 24, 2014
Changelog.md 0.9.1 Dec 5, 2016
Intro.md 0.9.1 Dec 5, 2016
README.md 0.9.1 Dec 5, 2016
bower.json 0.3.0 Apr 10, 2015

README.md

dropload

a javascript implementation of pull to refresh and up to loadmore
移动端下拉刷新、上拉加载更多插件

背景介绍 (introduce)

感谢交流群和github上的网友反馈和建议,修复两个bug。并且把某些demo里ajax获取数据部分从原来的假json改为真正的数据接口,让例子更接近线上开发环境。

历史背景介绍

最新版本 (The latest version)

0.9.1(161205)

  • 修复不调用loadDownFn报错bug
  • 修复窗口改变resize未触发加载数据bug

所有更新日志

示例 (demo)

扫一扫 DEMO1,加载底部(loadmore)

扫一扫 DEMO2,加载顶部、底部(refresh & loadmore)

扫一扫 DEMO3,特殊布局,加载顶部、底部(refresh & loadmore with fixed navbar)

扫一扫 DEMO4,按需加载

扫一扫 DEMO5,tab加载数据

依赖 (dependence)

Zepto 或者 jQuery 1.7以上版本,推荐jQuery 2.x版本(二者不要同时引用)
Zepto or jQuery 1.7+,recommend to use jQuery 2.x(not use them at the same time)

使用方法 (usage)

引用css和js
(basic)

<link rel="stylesheet" href="../dist/dropload.css">
<script src="../dist/dropload.min.js"></script>
$('.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();
            }
        });
    }
});

(注明:所有示例里ajaxsetTimeout都是为了模拟加载效果而写的,与本插件无直接关系。ajax建议自己写,无特殊情况不必copy我的ajax写法,因为写得太烂。如需下载本地运行,请在本机装服务器环境,否则ajax会报错。)

参数列表 (options)

参数 说明 默认值 可填值
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>',
domLoad : '<div class="dropload-load">○加载中...</div>',
domNoData : '<div class="dropload-noData">暂无数据</div>'
}
数组
autoLoad 自动加载 true true和false
distance 拉动距离 50 数字
threshold 提前加载距离 加载区高度2/3 正整数
loadUpFn 上方function function(me){
//你的代码
me.resetload();
}
loadDownFn 下方function function(me){
//你的代码
me.resetload();
}

API

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

lock() 锁定dropload

参数 说明
lock() 智能锁定,锁定上一次加载的方向
lock('up') 锁定上方
lock('down') 锁定下方

unlock() 解锁dropload

noData() 无数据

参数 说明
noData() 无数据
noData(true) 无数据
noData(false) 有数据

resetload() 重置。每次数据加载完,必须重置

已知问题

  • 由于部分Android中UC和QQ浏览器头部有地址栏,并且一开始滑动页面隐藏地址栏时,无法触发scroll和resize,所以会导致部分情况无法使用。解决方案1:增加distance距离,例如DEMO2中distance:50;解决方案2:加meta使之全屏显示
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">

例如DEMO1

dropload使用交流群

群号:290725368,点击加群