文档章节

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

wncode
 wncode
发布于 2016/03/27 02:13
字数 809
阅读 436
收藏 1

dropload

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

背景介绍 (introduce)

年前把tab例子加上来让群友测试,果然群众的力量是伟大的!立马就检测出来bug,我当即修复好,只是用法比较复杂,暂时还想不出更方便的办法。顺便把上个版本的dropReload()API删掉,功能集成到之前resetload()里。另外还修复一个朋友发现的只调用下拉刷新,代码判断bug。

历史背景介绍

最新版本 (The latest version)

0.9.0(160215)

  • 删除dropReload()API,功能集成到之前resetload()里
  • 优化noData(),noData(false)为有数据
  • 修复只调用下拉刷新,不调用上拉加载更多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();
            }
        });
    }
});

(注明:所有示例里ajax和setTimeout都是为了模拟加载效果而写的,与本插件无直接关系。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()重置。每次数据加载完,必须重置

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">

例如DEMO1

© 著作权归作者所有

wncode
粉丝 196
博文 118
码字总数 90639
作品 0
浦东
程序员
私信 提问
加载中

评论(1)

yun127
yun127
如果有条件查询的话数据会重复加载的,有办法解决吗?
移动切图框架 SLICY 发布 v1.1 版本

移动切图框架 SLICY 发布v1.1版本,这是一次比较大的更新改动,SLICY 1.1开始我们受到 “不要重复的造轮子”的观念,由造轮子升级到了造车子,所以这次更新,我们加入了一些我们工作中经常用...

专注做前端
2016/11/11
1K
2
100+个最佳jQuery菜单与下拉菜单示例(1/10)

1) jQuery w菜单/下拉菜单示例教程 此教程是描述一个拥有全部不错的样式动画以及功能的菜单,也许这正式你一直在寻找的。我将细致描述 HTML 与 CSS 。我将假设你了解了 HTML 与 CSS 的知识并...

彭博
2012/04/22
10.2K
7
jQuery WeUI V0.4.2 发布

jQuery WeUI V0.4.2 发布了! jQuery WeUI 中使用的是官方WeUI的CSS代码,并提供了jQuery/Zepto版本的JS API实现。因为直接使用了官方的CSS,所以你不用担心跟官方版本的冲突。实际上 jQuery...

YC222
2016/03/16
16.4K
28
DataTables能实现移动端的下拉加载吗?可以,需要借助一下Scroller插件

版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/82287523 一、 通常情况下,DataTables(Datatables是一款具有高级交互功能的jQuery表格插件)只...

qing_gee
2018/09/01
0
0
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
108
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
6分钟前
0
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
3
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
12
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
13
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部