首页
所有分类
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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
Jquery获取radio选中的值
May 05 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jQuery-App输入框实现实时搜索
Nov 19 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
cvzone(1) 计算机视觉(2) mediapipe(1) 无限迭代(1) 分词器(1) okenizer(1) for(1) while(1) re模块(2) 事件调度器(1)
You might like
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
文本框输入时 实现自动提示（像百度、google一样）
2012/04/05 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
JS实现的数组全排列输出算法
2015/03/19 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
python编程开发之类型转换convert实例分析
2015/11/13 Python
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
python随机数分布random测试
2018/08/27 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
python zip()函数的使用示例
2020/09/23 Python
python中pivot()函数基础知识点
2021/01/03 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
2014年新农村建设工作总结
2014/12/01 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
python pygame 开发五子棋双人对弈
2022/05/02 Python
Mysql开启外网访问
2022/05/15 MySQL