Javascript下拉刷新的简单实现

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript实现定时页面跳转功能示例

    本文实例讲述了JavaScript实现定时页面跳转功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • 30条Java代码编写经验分享

    成为一个优秀的Java程序员,有着良好的代码编写习惯是必不可少的.下面就让我们来看看代码编写的30条建议吧. (1) 类名首字母应该大写.字段.方法以及对象(句柄)的首字母应小写.对于所有标识符,其中包含的所有单词都应紧靠在一起,而且大写中间单词的首字母.例如: ThisIsAClassName thisIsMethodOrFieldName 若在定义中出现了常数初始化字符,则大写static final基本类型标识符中的所有字母.这样便可标志出它们属于编译期的常数. Java包(Package

  • Java中\n和\r区别

    符号        ASCII码          意义 \n              10              换行NL \r               13              回车CR 回车 \r 本义是光标重新回到本行开头,r的英文return,控制字符可以写成CR,即Carriage Return 换行 \n 本义是光标往下一行(不一定到下一行行首),n的英文newline,控制字符可以写成LF,即Line Feed 在不同的操作系统这几个字符表现不同,比如在WIN系统

  • Java中Equals使用方法汇总

    这篇总结的形式是提出个问题,然后给出问题的答案.这是目前学习知识的一种尝试,可以让学习更有目的. Q1.什么时候应当重写对象的equals方法? 答:一般在我们需要进行值比较的时候,是需要重写对象的equals方法的.而例外情况在<effective java>的第7条"在改写equals的时候请遵守通用约定"中清楚描述了. 我们知道,在Java中,每个对象都继承于Object.如果不重写,则默认的equals代码如下所示: public boolean euqals(Ob

  • java Class.getSimpleName() 详解及用法

    java Class.getSimpleName() 的用法 Usage in android: private static final String TAG = DemoApplication.class.getSimpleName(); 实例代码: public class sample{ public static void main(String[] args){ //得到类的简写名称 System.out.println(sample.class.getSimpleName());

  • Java中request对象常用方法汇总

    Java中request对象常用方法汇总

    本文主要介绍了Java中的request对象,并且对request对象中的一些常用方法作了一点总结,如果你是Java初学者,或许这篇文章对你会有所帮助. HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的方法,可以获得客户这些信息. request常用方法: 一.获取客户机环境信息常见方法: 1.getRequestURL方法返回客户端发出请求时的完整URL. 2.getReques

  • java 单播、广播、组播详解及实例代码

    java 单播.广播.组播详解及实例代码 在当前网络通信中(TCP/IP也不例外)有三种通信模式:单播.广播.组播(又叫多播, 个人感觉叫多播描述的有点不恰当),其中多播出现的时间最晚,但同时具备单播和广播的优点,最具有发展前景. 一.通信方式分类: 1.单播:单台主机与单台主机之间的通信: 2.广播:单台主机与网络中所有主机的通信: 3.组播:单台主机与选定的一组主机的通信: 二.单播:    单播是网络通信中最常见的,网络节点之间的通信 就好像是人们之间的对话一样.如果一个人对另外一个人说话

  • javaScript嗅探执行神器-sniffer.js

    javaScript嗅探执行神器-sniffer.js

    一.热身--先看实战代码 a.js 文件 // 定义Wall及内部方法 ;(function(window, FUNC, undefined){ var name = 'wall'; Wall.say = function(name){ console.log('I\'m '+ name +' !'); }; Wall.message = { getName : function(){ return name; }, setName : function(firstName, secondNam

  • JavaScript Base64 作为文件上传的实例代码解析

    例如我们用某些 裁剪插件 得到的图片是 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406

  • 出现java.util.ConcurrentModificationException 问题及解决办法

    java.util.ConcurrentModificationException 解决办法 前言: 在使用iterator.hasNext()操作迭代器的时候,如果此时迭代的对象发生改变,比如插入了新数据,或者有数据被删除. 则使用会报以下异常: Java.util.ConcurrentModificationException at java.util.HashMap$HashIterator.nextEntry(HashMap.java:793) at java.util.HashMap$

随机推荐