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 26 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
vscode 调试 node.js的方法步骤
Sep 15 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
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
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
PHP内核探索之变量
2015/12/22 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
[05:24]TI9采访——教练
2019/08/24 DOTA
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
python 获取字典键值对的实现
2020/11/12 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
全球性的女装店:storets
2019/06/12 全球购物
Shell如何接收变量输入
2012/09/24 面试题
务虚会发言材料
2014/12/25 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript