这篇文章主要为大家详细介绍了 Javascript 下拉刷新的简单实现过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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();
- }
- }
- });
- }
代码分析:
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。
为什么要在 touchstart 的时候把 transition 的值设置为 0 秒呢?transition 的作用是为元素属性的变化添加过渡效果,例如一个框变大,我们设置为 transition 为 1s,那么这个框就是在 1s 内变大到指定大小。第一个参数表示设置过渡效果的 CSS 属性的名称 (如:margin,transform;all 表示所有) ,第二个参数表示过渡的时间。 代码中设置 transition 的目的是在于滑动结束后 (手指离开屏幕) 为滑块回弹添加过渡效果,这样看上去就不会那么突兀。当然,这个过渡效果同样会应用到数据加载完成后提示部分的隐藏上。设置为 0 是为了取消在滑动过程中的滑块过渡效果,我们手指往下滑动的时候,滑块会跟这向下移动,这样就有了滑动滑块的效果。如果这个时候不取消 transition 就会出现滑块抖动的效果 (嘿嘿,有兴趣的话可以试试这种感觉。) 。整个过程中 transition 是相当重要的。
4、关于 isLock 和 isCanDo.
这两个变量的作用在于防止二次滑动,在第一次滑动后数据加载完成之前不允许有第二次的滑动。当滑动开始的时候讲 isLock 和 isCanDo 都设置为 True,表示允许后面两个事件里的代码可以正常运行,当滑动结束后 isCanDo 设置为 false 表示在 isLock 被设置为 True 之前 (整个操作完成之前) 所有的事件代码均不可用 (不执行下拉数据加载等相关动作) 。
5、如何使用?
- $(function() {
- slide("#container", 61,
- function(e) {
- var that = this;
- setTimeout(function() {
- that.back.call();
- },
- 2000);
- });
- });
来源: http://www.phperz.com/article/17/0524/327698.html