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

时间：2021-05-26

本文实例讲述了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.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章