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 相关文章推荐
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
前端常见跨域解决方案(全)
Sep 19 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
JS实现手风琴特效
Nov 08 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
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
Vue表单实例代码
2016/09/05 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
学生上课迟到检讨书
2015/01/01 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL