html页面上拉刷新,jQuery实现的上拉刷新功能组件示例

本文实例讲述了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);