技术要点：
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"> <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; }