移动端下拉刷新、加载更多插件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(底部视图)属性结合起来写了 ...
随机推荐
- 通过实现System.IComparable接口的CompareTo方法对两个类进行比较
假设现在有一个学生类 class Student { int age; public Student(int age) { this.age = age; } } 要使学生类之间能进行比较,实现Sys ...
- dos 命令帮助文档chm
http://www.microsoft.com/resources/documentation/windows/xp/all/proddocs/en-us/ntcmds.mspx?mfr=true
- jquery缓存使用jquery.cookies.2.2.0.min.js
$.cookies.set(key, obj, { hoursToLive: 2}); key标识的键 , obj存入的值可以缓存json对象, hoursToLive 缓存小时数 $.cookies ...
- 【先定一个小目标】Windows下Redis的安装使用
Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...
- CSS3 速移动效果动画流畅无卡顿
js或jquery 元素移动以像素计算,手机上移动效果会有卡顿 利用CSS3 可以很简单的实现流畅的移动动画 transform: translate3d(66px, 88px, 0px) rotat ...
- ruby 基础知识(二)
ruby 中的动态方法 http://singleant.iteye.com/blog/1680382 Rails 大量使用了符号(symbol).符号看上去很像变量名,不过以冒号作为前缀.符号的例 ...
- WIN10下java8的开发环境配置与第一个java程序
一.开发环境配置 1.在官网上下载jdk-8u111-windows-x64.exe 2.运行安装包,可以自定义安装路径 3.进入环境变量设置: 计算机右键-->属性-->高级系统设置-- ...
- SqlServer 常用函数
case .. when .. then .. else .. end
- java解析xml的三种方法
java解析XML的三种方法 1.SAX事件解析 package com.wzh.sax; import org.xml.sax.Attributes; import org.xml.sax.SAXE ...
- 随笔分类 - Android之工具类
Android之文件搜索工具类 /** * @detail 搜索sdcard文件 * @param 需要进行文件搜索的目录 * @param 过滤搜索文件类型 */ private void sear ...