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