jQuery手势控制，下拉刷新

查看演示立即下载

插件描述：手机APP开发中，下拉刷新是一个很常见的功能，但是在网页中，这种模式用的很少。网页下拉刷新，看似简单的功能，但我在网上并没有找到比较好的解决方法。自己开发了一个，期间遇到了各种小坑，浏览器兼容，各种浏览器下拉默认事件，PC端无触摸事件~。记录一下

静态样式

**html代码示例**

<div class="container" id="container">
    <div class="loading-warp">
    </div>
</div>

其中container是触摸容器，loading-warp，是刷新提示容器，容器样式、id可以自定义，此处只是示例而已

css代码示例

.container{ overflow: hidden; min-height: 100%; }
.loading-warp{ margin-top: -100px; }

container高度不能设置为0,以免不能触发触摸事件，overflow属性必须设置为hidden~

loading-warp的margin-top值必须设置为其自身高度的相反值~

引用

javascript

<script type="text/javascript" src="script/lib/jquery-1.11.0.js"></script>
<script type="text/javascript" src="script/p-pull-refresh.js"></script>

WAP端引入jquery与下拉插件即可，当然也可以引用zepto

javascript

<script type="text/javascript" src="script/lib/jquery-1.11.0.js"></script>
<script type="text/javascript" src="script/lib/touche.js"></script>
<script type="text/javascript" src="script/p-pull-refresh.js"></script>

- PC端需要额外引入touche库文件添加触摸支持 [touche](https://github.com/pyrinelaw/touche);

- PC端调用需要触摸容器中图片相关元素的draggable为false，否则会触发默认拖动事件，导致下拉刷新失败;

调用参数

javascript

{
    // 触摸容器，默认为body
    $el: $('body'),   
    // 刷新提示容器
    // 提示容器中的内容随自己喜欢自定义
    $loadingEl: null,
    // 是否自动隐藏
    // 设置为自动隐藏后，数据请求成功，如需回到初始状态，需要执行reset方法
    autoHide: true, 
    // 请求数据地址
    url: undefined,
    // 获取下拉刷新发送数据，可以使用静态数据，也可以使用使用function动态传入数据
    sendData: null,    
    // 触发拖动像素距离(触发灵敏度),
    // 浏览器中下拉默认事件一旦触发后，就不能再通过冒泡阻止此事件。
    // chrome浏览器中大概是15PX左右的下拉后触发默认刷新，微信中大概是6像素左右。
    // 如需在微信中使用，建议设置为6像素
    startPX: 6, 
    // 回调函数
    callbacks: {
    pullStart: null,// 拖动开始
    start: null,// 开始请求数据
    success: null,// 数据请求成功, 回调方法中提供参数response
    error: null,// 数据请求错误
    end: null,// 下拉流程结束
    }
}

提供方法

javascript

// 初始化，isAnim: 是否需要动画效果

1	`reset(isAnim);`

// 设置销毁状态,statu设置为false后下拉刷新将不再生效，设置为true后将再次生效

1	`setDestroy(statu);`

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery实现下拉树
下一个特效： touchslider手机滑动插件