首页
所有分类
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实现按比例缩放图片的方法
Apr 29 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery实现朋友圈查看图片
Sep 11 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
负载均衡(6) 生成缩略图(1) 防盗链(1) http(6) Windows server 2016(6) IIS(7) Telnet(1) https(7) Windows server 2019(5) 动静分离(1)
You might like
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python字符串str和字节数组相互转化方法
2017/03/18 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Python中私有属性的定义方式
2020/03/05 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
DVF官方网站：美国时装界尊尚品牌
2017/08/29 全球购物
金额转换，阿拉伯数字的金额转换成中国传统的形式如：（￥1011）－> （一千零一拾一元整）输出
2015/05/29 面试题
英语专业毕业生自荐信范文
2013/12/31 职场文书
会计员岗位职责
2014/03/15 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
文明班级申报材料
2014/12/24 职场文书
社区党支部承诺书
2015/04/29 职场文书
如何制定一份可行的计划！
2019/06/21 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
MySQL数字类型自增的坑
2021/05/07 MySQL
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android