jQuery实现的上拉刷新功能组件示例


Posted in jQuery onMay 01, 2020

本文实例讲述了jQuery实现的上拉刷新功能组件。分享给大家供大家参考,具体如下:

技术要点:

1、jQuery的插件写法

2、上拉刷新步骤分解

3、css样式

jQuery的插件写法:

$.fn.pluginName = function() {
  return this.each(function () {
    fn();
  })
};

上拉刷新步骤分解:

上拉刷新可以分解成三个部分:一是开始(start),记录当前鼠标的位置;二是移动(move),根据下拉的位移响应不同的视图;三是结束(end),刷新页面。

;!function ($) {
  "use strict";
  var PTR = function (ele) {
    this.container = $(ele);
    this.container.addClass('pull-to-refresh');
    this.distance = 60; // 设置参考的下拉位移
    this.attachEvent();
  };
  // 判断是否有touch事件发生
  var isTouch = (function () {
    var isSupportTouch = !!'ontouchstart' in document || window.documentTouch;
    return isSupportTouch;
  })();
  var touchEvents = {
    start: isTouch ? 'touchstart': 'mousedown',
    move: isTouch ? 'touchmove':'mousemove',
    end: isTouch ? 'touchend': 'mouseup'
  };
  // 获取事件发生时相对于文档的距离(含滚动距离)
  function getTouchPosition(e) {
     var e = e.orinalEvent || e;
     console.log(e)
     if(e.type === 'touchstart' || e.type === 'touchmove' || e.type === 'touchend') {
       return {
         x: e.targetTouches[0].pageX,
         y: e.targetTouches[0].pageY
       }
     }else {
       return {
         x: e.pageX,
         y: e.pageY
       }
     }
  };
  PTR.prototype.touchStart = function (e) {
    var p = getTouchPosition(e);
    this.start = p;
    this.diffX = this.diffY = 0;
  };
  PTR.prototype.touchMove = function (e) {
    if(this.container.hasClass('refreshing')) return;
    if(!this.start) return false;
    var p = getTouchPosition(e);
    this.diffX = p.x - this.start.x;
    this.diffY = p.y - this.start.y;
    if(this.diffY < 0) return;
    this.container.addClass('touching');
    e.preventDefault();
    e.stopPropagation();
    // 设置container的位移小于页面滚动的距离,给人一种用力下拉的错觉,提升用户体验
    this.diffY = Math.pow(this.diffY, .8);
    this.container.css('transform', 'translate3d(0,'+ this.diffY +'px, 0)');
    if(this.diffY < this.distance) {
      this.container.removeClass('pull-up').addClass('pull-down')
    }else {
      this.container.removeClass('pull-down').addClass('pull-up')
    }
  };
  PTR.prototype.touchEnd = function (e) {
    var _this = this;
    this.start = false;
    this.container.removeClass('pull-down');
    this.container.removeClass('pull-up');
    this.container.removeClass('touching');
    this.container.css('transform','');
    if(this.diffY >= this.distance) {
      this.container.addClass('refreshing');
      this.container.trigger('pull-to-refresh')
    }
  };
  // 事件处理程序,通过$.proxy(fn, content)绑定执行函数的上下文。
  PTR.prototype.attachEvent = function () {
    var ele = this.container;
    ele.on(touchEvents.start, $.proxy(this.touchStart, this));
    ele.on(touchEvents.move, $.proxy(this.touchMove, this));
    ele.on(touchEvents.end, $.proxy(this.touchEnd, this));
  };
  // 实例化构造函数
  var pullToRefresh = function (ele) {
    new PTR(ele)
  };
  var pullToRefreshDone = function (ele) {
    $(ele).removeClass('refreshing');
  };
  // jQuery 插件编写的一般模式
  $.fn.pullToRefresh = function () {
    // return 是插件可链式调用
    // this 在这里是一个jQuery对象,相当于$(ele)。因为在即时执行函数作用域中,没必要用“$(this)”的方式来把this包裹到一个jQuery对象中,因为this本身已经是被包装好的jQuery对象。
    // this.each()使插件代码为多元素集合中的每个元素单独起作用
    return this.each(function () {
      pullToRefresh(this);
    })
  };
  $.fn.pullToRefreshDone = function () {
    return this.each(function () {
      pullToRefreshDone(this);
    })
  }

}(window.jQuery);

HTML代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="pull-to-refresh.css" rel="external nofollow" >
  <style>
    p {
      margin-top: 0;
    }
  </style>
</head>
<body>
<div class="pull-to-refresh_layer">
  <div class="pull-to-refresh-arrow">↓</div>
  <div class="pull-to-refresh-preloader"></div>
  <div class="down">下拉刷新</div>
  <div class="up">释放刷新</div>
  <div class="refresh">正在刷新</div>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>

</div>
<script src="../jquery-1.8.3.min.js"></script>
<script src="pull-to-refresh.js"></script>
<script>
  $(function () {
    $(document.body).pullToRefresh().on('pull-to-refresh', function () {
      setTimeout(function () {
        $(document.body).pullToRefreshDone();
      }, 2000)
    });
  })
</script>
</body>
</html>

CSS代码如下:

.pull-to-refresh {
  margin-top: -50px;
  transition: transform .4s;
}
.pull-to-refresh .pull-to-refresh-preloader,
.pull-to-refresh .up,
.pull-to-refresh .refresh {
  display: none;
}
.pull-to-refresh.refreshing {
  transform: translate3d(0,50px,0);
}

.refreshing .pull-to-refresh-arrow,
.refreshing .down,
.refreshing .up {
  display: none;
}
.refreshing .refresh,
.refreshing .pull-to-refresh-preloader {
  display: inline-block;
}
.pull-to-refresh_layer {
  height: 30px;
  line-height: 30px;
  padding-bottom: 10px;
}
.pull-down .pull-to-refresh_layer .up,
.pull-down .pull-to-refresh_layer .refresh {
  display: none;
}
.pull-down .pull-to-refresh_layer .down{
  display: inline-block;
}
.pull-up .pull-to-refresh_layer .up{
  display: inline-block;
}

.pull-up .pull-to-refresh_layer .down,
.pull-up .pull-to-refresh_layer .refresh {
  display: none;
}

.pull-up .pull-to-refresh-arrow {
  transform: rotate(180deg) translate3d(0, 0, 0);
}
.pull-to-refresh-arrow {
  display: inline-block;
  z-index: 10;
  margin-right: 4px;
  transition-duration: 300ms;
  transform: rotate(0deg) translate3d(0, 0, 0);
}

.pull-to-refresh_layer {
  display: inline-block;
}
.pull-to-refresh-preloader {
  display: inline-block;
}
.pull-down {

}
.pull-up {

}
.down {
  display: inline-block;
}
.up {
  display: inline-block;
}
.refresh {
  display: inline-block;
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun 测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 #jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 #jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 #jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 #jQuery
jquery检测上传文件大小示例
Apr 26 #jQuery
jquery实现轮播图特效
Apr 12 #jQuery
用jQuery实现抽奖程序
Apr 12 #jQuery
You might like
常用星际术语索引(新手指南)
2020/03/04 星际争霸
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
在Python的Django框架中创建和使用模版
2015/07/15 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
详解Python中的文件操作
2021/01/14 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
婚礼证婚人证婚词
2014/01/08 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers