介绍 .fn美元。pluginName=function () {
返回。每个(函数(){
fn ();
})
}; ; !函数(美元){
“使用strict";
var PTR=函数(避署){
这一点。容器=$(避署);
this.container.addClass (& # 39; pull-to-refresh& # 39;);
这一点。距离=60;//设置参考的下拉位移
this.attachEvent ();
}；//判断是否有联系事件发生
var isTouch=(函数(){
var isSupportTouch=! ! & # 39; ontouchstart& # 39;在文档| | window.documentTouch;
返回isSupportTouch;
}) ();
var touchEvents={
开始:isTouch, # 63;& # 39;touchstart& # 39;: & # 39; mousedown& # 39;
移动:isTouch, # 63;& # 39;touchmove& # 39;: & # 39; mousemove& # 39;
结束:isTouch, # 63;& # 39;touchend& # 39;: & # 39; mouseup # 39;
}；//获取事件发生时相对于文档的距离(含滚动距离)
函数getTouchPosition (e) {
var e=e。orinalEvent | | e;
console.log (e)
如果(e。类型===& # 39;touchstart& # 39;| | e。类型===& # 39;touchmove& # 39;| | e。类型===& # 39;touchend& # 39;) {
返回{
x: e.targetTouches [0] .pageX,
y: e.targetTouches [0] .pageY
}
其他}{
返回{
x: e.pageX,
y: e.pageY
}
}
}；
PTR.prototype。touchStart=function (e) {
var p=getTouchPosition (e);
这一点。开始=p;
这一点。diffX=iffY=0;
}；
PTR.prototype。touchMove=function (e) {
如果(this.container.hasClass(& # 39;刷新# 39;))返回;
如果(! this.start)返回false;
var p=getTouchPosition (e);
这一点。diffX=p。x - this.start.x;
这一点。diffY=p。y - this.start.y;
如果这一点。diffY & lt;0)返回;
this.container.addClass(& # 39;触摸# 39;);
e.preventDefault ();
e.stopPropagation ();//设置容器的位移小于页面滚动的距离,给人一种用力下拉的错觉,提升用户体验
这一点。diffY=Math.pow(这一点。diffY。8);
this.container.css(& # 39;变换# 39;,& # 39;translate3d (0 & # 39; +。diffY + & # 39; px, 0) & # 39;);
如果这一点。diffY & lt;this.distance) {
this.container.removeClass(& # 39;牵引# 39;).addClass(& # 39;下拉# 39;)
其他}{
this.container.removeClass(& # 39;下拉# 39;).addClass(& # 39;牵引# 39;)
}
}；
PTR.prototype。touchEnd=function (e) {
var _this=;
这一点。开始=false;
this.container.removeClass(& # 39;下拉# 39;);
this.container.removeClass(& # 39;牵引# 39;);
this.container.removeClass(& # 39;触摸# 39;);
this.container.css(& # 39;变换# 39;,& # 39;& # 39;);
如果这一点。diffY祝辞=this.distance) {
this.container.addClass(& # 39;刷新# 39;);
this.container.trigger (& # 39; pull-to-refresh& # 39;)
}
}；//事件处理程序,通过美元。代理(fn、内容)绑定执行函数的上下文。
PTR.prototype。attachEvent=function () {
var避署=this.container;
ele.on (touchEvents。开始,.proxy美元(这一点。touchStart));
ele.on (touchEvents。移动,.proxy美元(这一点。touchMove));
ele.on (touchEvents。最终,.proxy美元(这一点。touchEnd));
}；//实例化构造函数
var pullToRefresh=函数(避署){
新的PTR(避署)
}；
var pullToRefreshDone=函数(避署){
$(避署).removeClass(& # 39;刷新# 39;);
}；//jQuery插件编写的一般模式
.fn美元。pullToRefresh=function () {//返回是插件可链式调用//这个在这里是一个jQuery对象,相当于美元(避署)。因为在即时执行函数作用域中,没必要用" $()”的方式来把这包裹到一个jQuery对象中,因为这本身已经是被包装好的jQuery对象。//this.each()使插件代码为多元素集合中的每个元素单独起作用
返回。每个(函数(){
pullToRefresh(这个);
})
}；
.fn美元。pullToRefreshDone=function () {
返回。每个(函数(){
pullToRefreshDone(这个);
})
}
}(window.jQuery); & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> Title
这篇文章主要讲解了jQuery如何实现上拉刷新功能,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
技术要点:
1, jQuery的插件写法
2,上拉刷新步骤分解
3, css样式
jQuery的插件写法:
上拉刷新步骤分解:
上拉刷新可以分解成三个部分:一是开始(开始),记录当前鼠标的位置;二是移动(移动),根据下拉的位移响应不同的视图;三是结束(结束),刷新页面。
HTML代码如下:
