本文实例为大家分享了Javascript下拉刷新的简单实现代码，供大家参考，具体内容如下
Html相关代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> </head> <body style="background-color: beige;"> <div id="container" style="width:100%;border:solid 1px blue; transform:translate(0px,-61px)"> <div style="height:50px; line-height:50px; text-align:center; width:100%; border:solid 1px red;"> 努力加载中... </div> <div style="width:100%; line-height:30px;background-color:#F2F2F2; font-size:17px; font-family:'Adobe Garamond Pro'"> 下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新 下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新 下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉拉刷新下拉刷新 </div> </div> </body></html><!--JQuery是那么的好用，这种情况下怎么能没有它呢！--><script type="text/javascript" src="http://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(); } } }); }
新闻热点
疑难解答
图片精选
