站长资源
中国站长网站

移动端下拉刷新、上拉加载功能插件dropload的介绍及使用方法

上拉加载

移动端下拉刷新、上拉加载功能插件dropload的介绍及使用方法 -1

下拉刷新

移动端下拉刷新、上拉加载功能插件dropload的介绍及使用方法 -2

移动端下拉刷新、上拉加载功能是我们移动端app里面常见的功能,今天就来交给大家如何用插件来实现上拉加载下拉刷新

需要的插件

Zepto 或者 jQuery 1.7以上版本,推荐jQuery 2.x版本

以及主角dropload.js 示例里面都有大家可以下载研究,里面有五个demo

使用方法

引入插件

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

注明: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() 重置。每次数据加载完,必须重置

dropReload() 手动加载

其他问题

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

<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">


免费下载  在线演示  
×

站长资源极速下载通道: 移动端下拉刷新、上拉加载功能插件dropload的介绍及使用方法

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 移动端下拉刷新、上拉加载功能插件dropload的介绍及使用方法

评论 抢沙发

评论前必须登录!