移动端下拉刷新、加载更多插件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(底部视图)属性结合起来写了 ...
随机推荐
- bootstrap 日期控件 bootstrap-datepicker
http://www.bootcss.com/p/bootstrap-datetimepicker/
- Windows常用快捷方式
总结了其他常用的快捷方式: Ctrl+C 复制 . Ctrl+V粘贴. Ctrl+X剪切. Delete删除. Alt+Tab 应用程序切换 Ctrl+Alt+Delete Ctrl+shift+E ...
- loss function
什么是loss? loss: loss是我们用来对模型满意程度的指标.loss设计的原则是:模型越好loss越低,模型越差loss越高,但也有过拟合的情况. loss function: 在分 ...
- vim as python IDE
参照Martin Brochhaus大神的视频,今天我也尝试了一下配置vim python IDE以后使用过程中只需要https://github.com/wyj1239630590/vim-as-a ...
- AJAX学习笔记
AJAX不是一种编程语言,AJAX是一种实现网页异步加载的技术,即不刷新网页也能部分的更新网页的内容.如:提交表单信息,通过ajax可以不刷新页面来使得人们明白如何正确的填写信息,判断填写信息的错误或 ...
- webpack踩坑之路——构建基本的React+ES6项目
转自:http://www.cnblogs.com/ghost-xyx/p/5483464.html webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是 ...
- YII2-数据库数据查询方法,关联查询with, joinWith区别和分页
一.ActiveRecord 活动记录 1.with关联查询 例如,查询评论 $post = Post::find()->with('comments'); 等价于以下结果集 SELECT * ...
- 第三章 --- 关于Javascript 设计模式 之 代理模式
第一.定义: 代理模式是为一个对象提供代用品或者占位符,以便控制对它的访问. 比如说,某男生小明想向他的女神 A 表白,刚好小明认识的一个女生B 和 女神A 是好朋友,那么小明就想让 女生B 帮忙送花 ...
- 用ffmpeg合并音频文件
1 问题描述 打电话的对话,被拆分成了两个PCM文件.其中主叫的录音文件A.pcm,被叫的录音为B.pcm. 问题是怎么合成一个混音的对话文件AB.wav. 2 WAV文件的录音格式 常见的声音文件主 ...
- codevs1403 新三国争霸
题目描述 Description PP 特别喜欢玩即时战略类游戏,但他觉得那些游戏都有美中不足的地方.灾害总不降临道路,而只降临城市,而且道路不能被占领,没有保护粮草的真实性.于是他就研发了<新 ...