Javascript下拉刷新的简单实现


Posted in Javascript onFebruary 14, 2017

本文实例为大家分享了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();
    }
   }
  });
 }

代码分析:

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);
 });
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js压缩利器
Feb 20 Javascript
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
Vue 短信验证码组件开发详解
Feb 14 #Javascript
JS去除字符串中空格的方法
Feb 14 #Javascript
Node.js与Sails redis组件的使用教程
Feb 14 #Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 #Javascript
canvas实现十二星座星空图
Feb 14 #Javascript
JavaScript省市级联下拉菜单实例
Feb 14 #Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 #Javascript
You might like
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
js类型检查实现代码
2010/10/29 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
python读取注册表中值的方法
2013/04/08 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python实现单词翻译功能
2017/06/06 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
Python之字典对象的几种创建方法
2020/09/30 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
图书室管理制度
2014/01/19 职场文书
骨干教师培训方案
2014/05/06 职场文书
安全生产标语大全
2014/10/06 职场文书
公司授权委托书
2014/10/17 职场文书
英语辞职信范文
2015/02/28 职场文书
优秀团员自我评价
2015/03/10 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
Pandas数据结构之Series的使用
2022/03/31 Python