首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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实现的上拉刷新功能组件示例

- Author -

廖飞银

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 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
css3 (2) Normal From(1) MybatisPlus(2) self(1) SpringBoot(22) MapReduce(1) JSON(10) capture(1) uniapp(4) Qlabel(1)
You might like
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
php实现无限级分类查询（递归、非递归）
2016/03/10 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
js替代copy(示例代码)
2013/11/27 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
原生js实现的金山打字小游戏（实例代码详解）
2020/03/16 Javascript
JS 设计模式之：单例模式定义与实现方法浅析
2020/05/06 Javascript
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
利用Python学习RabbitMQ消息队列
2015/11/30 Python
深入理解python函数递归和生成器
2016/06/06 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
python3 实现口罩抽签的功能
2020/03/11 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
美国著名的品牌折扣店：Burlington
2017/06/08 全球购物
什么是动态端口（Dynamic Ports）？动态端口的范围是多少？
2014/12/12 面试题
精彩的推荐信范文
2013/11/26 职场文书
六一儿童节活动策划方案
2014/01/27 职场文书
安全环保标语
2014/06/09 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
齐云山导游词
2015/02/06 职场文书
2015个人半年总结范文
2015/03/09 职场文书