jQuery实现的上拉刷新功能组件示例

2020-05-29 07:30:00易采站长站整理

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