使用方法

引用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)[转]的更多相关文章

  1. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

  2. Android UI--自定义ListView(实现下拉刷新+加载更多)

    Android UI--自定义ListView(实现下拉刷新+加载更多) 关于实现ListView下拉刷新和加载更多的实现,我想网上一搜就一堆.不过我就没发现比较实用的,要不就是实现起来太复杂,要不就 ...

  3. 分页插件思想:pc加载更多功能和移动端下拉刷新加载数据

    感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...

  4. Android Demo 下拉刷新+加载更多+滑动删除

    小伙伴们在逛淘宝或者是各种app上,都可以看到这样的功能,下拉刷新和加载更多以及滑动删除,刷新,指刷洗之后使之变新,比喻突破旧的而创造出新的,比如在手机上浏览新闻的时候,使用下拉刷新的功能,我们可以第 ...

  5. PullToRefresh下拉刷新 加载更多 详解 +示例

    常用设置 项目地址:https://github.com/chrisbanes/Android-PullToRefresh a. 设置刷新模式 如果Mode设置成Mode.PULL_FROM_STAR ...

  6. Android之RecyclerView轻松实现下拉刷新和加载更多

    今天研究了下RecyclerView的滑动事件,特别是下拉刷新和加载更多事件,在现在几乎所有的APP显示数据列表时都用到了.自定义RecyclerView下拉刷新和加载更多听上去很复杂,实际上并不难, ...

  7. RecyclerView的下拉刷新和加载更多 动画

    下拉刷新和加载更多 1.https://github.com/jianghejie/XRecyclerView 2.http://blog.csdn.net/jabony/article/detail ...

  8. 移动端实现上拉加载更多(使用dropload.js vs js)

    做下笔记,:移动端实现上拉加载更多,其实是数据的分段加载,在这里为了做测试我写了几个json文件作为分段数据: 方式一:使用dropload.js; 配置好相关参数及回调函数就可使用:代码如下 var ...

  9. iOS 下拉刷新和加载更多 (OC\Swift)

    Swift语言出来之后, 可能还没有第三方的下拉刷新和上提加载, 所以自己用UIRefreshControl控件和UITableView实例的tableFooterView(底部视图)属性结合起来写了 ...

随机推荐

  1. bootstrap 日期控件 bootstrap-datepicker

    http://www.bootcss.com/p/bootstrap-datetimepicker/

  2. Windows常用快捷方式

    总结了其他常用的快捷方式: Ctrl+C 复制 . Ctrl+V粘贴. Ctrl+X剪切. Delete删除. Alt+Tab 应用程序切换 Ctrl+Alt+Delete  Ctrl+shift+E ...

  3. loss function

    什么是loss?   loss: loss是我们用来对模型满意程度的指标.loss设计的原则是:模型越好loss越低,模型越差loss越高,但也有过拟合的情况.   loss function: 在分 ...

  4. vim as python IDE

    参照Martin Brochhaus大神的视频,今天我也尝试了一下配置vim python IDE以后使用过程中只需要https://github.com/wyj1239630590/vim-as-a ...

  5. AJAX学习笔记

    AJAX不是一种编程语言,AJAX是一种实现网页异步加载的技术,即不刷新网页也能部分的更新网页的内容.如:提交表单信息,通过ajax可以不刷新页面来使得人们明白如何正确的填写信息,判断填写信息的错误或 ...

  6. webpack踩坑之路——构建基本的React+ES6项目

    转自:http://www.cnblogs.com/ghost-xyx/p/5483464.html webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是 ...

  7. YII2-数据库数据查询方法,关联查询with, joinWith区别和分页

    一.ActiveRecord 活动记录 1.with关联查询 例如,查询评论 $post = Post::find()->with('comments'); 等价于以下结果集 SELECT * ...

  8. 第三章 --- 关于Javascript 设计模式 之 代理模式

    第一.定义: 代理模式是为一个对象提供代用品或者占位符,以便控制对它的访问. 比如说,某男生小明想向他的女神 A 表白,刚好小明认识的一个女生B 和 女神A 是好朋友,那么小明就想让 女生B 帮忙送花 ...

  9. 用ffmpeg合并音频文件

    1 问题描述 打电话的对话,被拆分成了两个PCM文件.其中主叫的录音文件A.pcm,被叫的录音为B.pcm. 问题是怎么合成一个混音的对话文件AB.wav. 2 WAV文件的录音格式 常见的声音文件主 ...

  10. codevs1403 新三国争霸

    题目描述 Description PP 特别喜欢玩即时战略类游戏,但他觉得那些游戏都有美中不足的地方.灾害总不降临道路,而只降临城市,而且道路不能被占领,没有保护粮草的真实性.于是他就研发了<新 ...