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动态调整TextArea高度的代码
Dec 28 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
css配合jquery美化 select
Nov 29 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 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
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
JQuery之拖拽插件实现代码
2011/04/14 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
老生常谈Python基础之字符编码
2017/06/14 Python
numpy数组拼接简单示例
2017/12/15 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
python获取交互式ssh shell的方法
2019/02/14 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
高考自主招生自荐信
2013/10/20 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
高中军训感想800字
2014/02/23 职场文书
家长会欢迎标语
2014/06/24 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
公司的力量观后感
2015/06/05 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
如何用python绘制雷达图
2021/04/24 Python
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript