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 -
廖飞银声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@