移动端下拉刷新、加载更多插件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(底部视图)属性结合起来写了 ...
随机推荐
- iOS 组件化漫谈
1.准备工作 由于工程越来越大,里面的文件也越来越多.很多时候merge代码的时候工程文件起了冲突之后,若 .xcodeproj文件冲突 打开之后很难以修改. 架构其实相对开发来说还是比较难于下手的东 ...
- C#工具代码
反射获取当前请求参数 var prop = System.Type.GetType("System.Web.HttpContext, System.Web, Version=4.0.0.0, ...
- python httplib get和post获取数据
httplib 下的 status http请求的状态 200 404 500... reason 返回答复 OK或者 FAULRE read() 读取内容 get方法: #!/usr/bin/e ...
- HTML基础标签入门
HTML基础标签 昨天学习了一些HTML的基本标签以及基本属性: HTML是一种超文本标记语言,其中PHP是世界上最好的语言(增加学习的动力荣誉感). HTML文档里包含三部分: <html&g ...
- 【转】Ubuntu 16.04安装配置TensorFlow GPU版本
之前摸爬滚打总是各种坑,今天参考这篇文章终于解决了,甚是鸡冻\(≧▽≦)/,电脑不知道怎么的,安装不了16.04,就安装15.10再升级到16.04 requirements: Ubuntu 16.0 ...
- HTTP压力测试工具
HttpTest4Net是一款基于C#实现的和HTTP压力测试工具,通过工具可以简单地对HTTP服务进行一个压力测试.虽然VS.NET也集成了压力测试项目,但由于VS自身占用的资源导致了在配置不高的P ...
- NFS 文件系统
NFS的安装是非常简单的,只需要两个软件包即可,而且在通常情况下,是作为系统的默认包安装的. NFS服务的主要配置文件 /etc/exports /etc/exports文件内容格式: <输出目 ...
- js笔记
1.克隆对象 克隆数组: var country=['中国','美国']; var copyCountry=country.slice(0); 克隆对象: var people={sex:'man', ...
- Javascript的原型链图
90%的前端或者js程序员或者老师们对Javascript懂得不比这个多 给手机看的 但是这个图里的所有褐色单向箭头链就是Javascript的原型链(颜色标注对理解js原型链很关键) 这图中的各个_ ...
- Wrong list
1.背包dp[i][j]无论当前物品是否不大于j都可以转移dp[i-1][j] 2.循环从0开始还是1开始的问题 3.无向图边集数组开两倍 4.(3*987654321) > maxint 4. ...