移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)[转]
使用方法
引用css和js
<link rel="stylesheet" href="../dist/dropload.min.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();
}
});
}
});
参数列表
参数 | 说明 | 默认值 | 可填值 |
---|---|---|---|
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
下载地址: http://www.grycheng.com/wp-content/uploads/2015/10/dropload.zip
移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)[转]的更多相关文章
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...
- Android UI--自定义ListView(实现下拉刷新+加载更多)
Android UI--自定义ListView(实现下拉刷新+加载更多) 关于实现ListView下拉刷新和加载更多的实现,我想网上一搜就一堆.不过我就没发现比较实用的,要不就是实现起来太复杂,要不就 ...
- 分页插件思想:pc加载更多功能和移动端下拉刷新加载数据
感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...
- Android Demo 下拉刷新+加载更多+滑动删除
小伙伴们在逛淘宝或者是各种app上,都可以看到这样的功能,下拉刷新和加载更多以及滑动删除,刷新,指刷洗之后使之变新,比喻突破旧的而创造出新的,比如在手机上浏览新闻的时候,使用下拉刷新的功能,我们可以第 ...
- PullToRefresh下拉刷新 加载更多 详解 +示例
常用设置 项目地址:https://github.com/chrisbanes/Android-PullToRefresh a. 设置刷新模式 如果Mode设置成Mode.PULL_FROM_STAR ...
- Android之RecyclerView轻松实现下拉刷新和加载更多
今天研究了下RecyclerView的滑动事件,特别是下拉刷新和加载更多事件,在现在几乎所有的APP显示数据列表时都用到了.自定义RecyclerView下拉刷新和加载更多听上去很复杂,实际上并不难, ...
- RecyclerView的下拉刷新和加载更多 动画
下拉刷新和加载更多 1.https://github.com/jianghejie/XRecyclerView 2.http://blog.csdn.net/jabony/article/detail ...
- 移动端实现上拉加载更多(使用dropload.js vs js)
做下笔记,:移动端实现上拉加载更多,其实是数据的分段加载,在这里为了做测试我写了几个json文件作为分段数据: 方式一:使用dropload.js; 配置好相关参数及回调函数就可使用:代码如下 var ...
- iOS 下拉刷新和加载更多 (OC\Swift)
Swift语言出来之后, 可能还没有第三方的下拉刷新和上提加载, 所以自己用UIRefreshControl控件和UITableView实例的tableFooterView(底部视图)属性结合起来写了 ...
随机推荐
- 【Beta】Scrum09
Info 考试周,暂停工作 时间:2016.12.26 21:35 时长:20min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.12.31 21:30 Task Rep ...
- History lives on in this distinguished Polish city II 2017/1/5
原文 Some fresh air After your time underground,you can return to ground level or maybe even a little ...
- Nodejs事件引擎libuv源码剖析之:高效队列(queue)的实现
声明:本文为原创博文,转载请注明出处. 在libuv中,有一个只使用简单的宏封装成的高效队列(queue),现在我们就来看一下它是怎么实现的. 首先,看一下queue中最基本的几个宏: typede ...
- C语言查缺补漏
7.用ucontext实现简单的用户空间协作多线程 转 http://blog.chinaunix.net/uid-26000137-id-3973004.html http://blog.csdn. ...
- [C#]如何让webbrowser控件支持Html5
最近因为项目的需要,需要研究在C#winform窗体中加载网页,和弹出提醒,但我们的网站是HTML5的,ie浏览器内核不支持,而且因为根据客户机系统的不一致,加载的ie内核可能是不同,显示的效果也会不 ...
- SpringMVC学习记录1
起因 以前大三暑假实习的时候看到公司用SpringMVC而不是Struts2,老司机告诉我SpringMVC各种方便,各种解耦. 然后我自己试了试..好像是蛮方便的.... 基本上在Spring的基础 ...
- jQuey知识点三 解析json数据
1.解析简单数据 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="vie ...
- 影响postgresql性能的几个重要参数
转载 一篇蛮老的文章了,但是还是很有用,可参考修补. PG的配置文件是数据库目录下的postgresql.conf文件,8.0以后的版本可支持K,M,G这样的参数,只要修改相应参数后重新启动PG服务就 ...
- 报错com/android/dx/command/dexer/Main : Unsupported major.minor version 52.0
看着错误信息应该是从高版本换成低版本报的错误,然而我的JDK并没有变动.会像昨天走之前干了什么? 自己在AndroidStudio上倒弄自己的小项目,更新了build tools到24了 删除24,e ...
- web性能优化
常用方法 压缩源码和图片 JavaScript文件源代码:可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可 以使用一些开源压缩软件来压缩 ...