<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> </head> <body> <div> <div> 努力加载中... </div> <div> 下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新 下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新 下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉拉刷新下拉刷新 </div> </div> </body> </html> <!--JQuery是那么的好用，这种情况下怎么能没有它呢！--> <script type="text/javascript" src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
JavaScript该做什么呢？
1、根据滑动轨迹动态调整滑块位置（transfrom=>translate）；
2、根据滑动的距离判断是否执行刷新（或数据加载）。
当然，如果滑动结束后使用ajax重新加载页面数据，还将涉及到一个页面向上滑动并隐藏提示部分的效果。
大致思路：
(前提条件：当前元素已滑动至顶部)
1、当鼠标左键按下（移动设备上的touchstart事件）的时候记录下当前鼠标位置的 Y轴坐标；
2、当鼠标移动的时候（touchmove事件），记录下鼠标的Y 轴坐标判断滑动轨迹并进行相应的滑块移动；
3、当鼠标左键松开（touchend事件）的时候，通过对比鼠标开始和结束的Y轴坐标的距离判断是否应该刷新页面（或重新加载数据）。
上代码：
/* *obj--滑动对象 *offset--滑动距离（当滑动距离大于等于offset时将调用callback） *callback--滑动完成后的回调函数 */ var slide = function (obj, offset, callback) { var start, end, isLock = false,//是否锁定整个操作 isCanDo = false,//是否移动滑块 isTouchPad = (/hp-tablet/gi).test(navigator.appVersion), hasTouch = 'ontouchstart' in window && !isTouchPad; //将对象转换为jquery的对象 obj = $(obj); var objparent = obj.parent(); /*操作方法*/ var fn = { //移动容器 translate: function (diff) { obj.css({ "-webkit-transform": "translate(0," + diff + "px)", "transform": "translate(0," + diff + "px)" }); }, //设置效果时间 setTranslition: function (time) { obj.css({ "-webkit-transition": "all " + time + "s", "transition": "all " + time + "s" }); }, //返回到初始位置 back: function () { fn.translate(0 - offset); //标识操作完成 isLock = false; } }; //滑动开始 obj.bind("touchstart", function (e) { if (objparent.scrollTop() <= 0 && !isLock) { var even = typeof event == "undefined" ? e : event; //标识操作进行中 isLock = true; isCanDo = true; //保存当前鼠标Y坐标 start = hasTouch ? even.touches[0].pageY : even.pageY; //消除滑块动画时间 fn.setTranslition(0); } }); //滑动中 obj.bind("touchmove", function (e) { if (objparent.scrollTop() <= 0 && isCanDo) { var even = typeof event == "undefined" ? e : event; //保存当前鼠标Y坐标 end = hasTouch ? even.touches[0].pageY : even.pageY; if (start < end) { even.preventDefault(); //消除滑块动画时间 fn.setTranslition(0); //移动滑块 fn.translate(end - start - offset); } } }); //滑动结束 obj.bind("touchend", function (e) { if (isCanDo) { isCanDo = false; //判断滑动距离是否大于等于指定值 if (end - start >= offset) { //设置滑块回弹时间 fn.setTranslition(1); //保留提示部分 fn.translate(0); //执行回调函数 if (typeof callback == "function") { callback.call(fn, e); } } else { //返回初始状态 fn.back(); } } }); }
代码分析：
1、参数：obj，要滑动的对象；offset，提示部分的transform的值（ 代码中是 transform:translate(0px,-61px) ，那么这里就是61 ）；callback，回调函数，在下拉完成后调用的函数（ 页面刷新或数据加载 ）。
2、为什么是transform不是margin？
因为transform不会引起重绘，相比margin更流畅，性能更好。但是transfrom有个比较好玩的地方，如果translateY的值为负数 （当前元素上移xx像素） 下方元素不会跟着上移 （margin会上移） ,在这点上它和margin是有区别的 。 注意，这里的-webkit-transform的存在是有必要的，因为有些浏览器识别不了transform，比如微信内置浏览 （我的手机上是这样的） 。为了兼容性，多扣几个字母是值得的。
3、关于transition设置为0s。