首页
所有分类
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 EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jquery实现拖拽小方块效果
Dec 10 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
dockerfile(1) pytz(1) reduce(2) GoFrame(3) 分布式锁(3) filter(1) Tsmoothie(1) SQLite3(1) Selenium(1) 短信验证码(1)
You might like
十天学会php之第十天
2006/10/09 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
Black Halo官方网站：购买连衣裙、礼服和连体裤
2018/06/13 全球购物
英国快时尚女装购物网站：PrettyLittleThing
2018/08/15 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
幼儿园辞职书
2015/02/26 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
市场营销计划书
2019/04/24 职场文书
Python之matplotlib绘制饼图
2022/04/13 Python
MySQL主从切换的超详细步骤
2022/06/28 MySQL
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers