微客导航 » 文章资讯 » jQuery实现的上拉刷新功能组件示例

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

2023-07-26 10:10:04 305

本文实例讲述了jQuery实现的上拉刷新功能组件。分享给大家供大家参考，具体如下：

技术要点：

1、jQuery的插件写法

2、上拉刷新步骤分解

3、css样式

jQuery的插件写法：

$.fn.pluginName=function(){
returnthis.each(function(){
fn();
})
};

上拉刷新步骤分解：

上拉刷新可以分解成三个部分：一是开始（start），记录当前鼠标的位置；二是移动（move），根据下拉的位移响应不同的视图；三是结束（end），刷新页面。

;!function($){
"usestrict";
varPTR=function(ele){
this.container=$(ele);
this.container.addClass('pull-to-refresh');
this.distance=60;//设置参考的下拉位移
this.attachEvent();
};
//判断是否有touch事件发生
varisTouch=(function(){
varisSupportTouch=!!'ontouchstart'indocument||window.documentTouch;
returnisSupportTouch;
})();
vartouchEvents={
start:isTouch?'touchstart':'mousedown',
move:isTouch?'touchmove':'mousemove',
end:isTouch?'touchend':'mouseup'
};
//获取事件发生时相对于文档的距离（含滚动距离）
functiongetTouchPosition(e){
vare=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){
varp=getTouchPosition(e);
this.start=p;
this.diffX=this.diffY=0;
};
PTR.prototype.touchMove=function(e){
if(this.container.hasClass('refreshing'))return;
if(!this.start)returnfalse;
varp=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.addClass('refreshing');
this.container.trigger('pull-to-refresh')
}
};
//事件处理程序，通过$.proxy(fn,content)绑定执行函数的上下文。
PTR.prototype.attachEvent=function(){
varele=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));
};
//实例化构造函数
varpullToRefresh=function(ele){
newPTR(ele)
};
varpullToRefreshDone=function(ele){
$(ele).removeClass('refreshing');
};
//jQuery插件编写的一般模式
$.fn.pullToRefresh=function(){
//return是插件可链式调用
//this在这里是一个jQuery对象，相当于$(ele)。因为在即时执行函数作用域中，没必要用“$(this)”的方式来把this包裹到一个jQuery对象中，因为this本身已经是被包装好的jQuery对象。
//this.each()使插件代码为多元素集合中的每个元素单独起作用
returnthis.each(function(){
pullToRefresh(this);
})
};
$.fn.pullToRefreshDone=function(){
returnthis.each(function(){
pullToRefreshDone(this);
})
}

}(window.jQuery);

HTML代码如下：





Title





↓

下拉刷新

释放刷新

正在刷新

Loremipsumdolorsitamet,consecteturadipisicingelit.Accusamusametaperiam,architectoataut beataedignissimoseaqueestexfugi atinciduntinventorenatusnemonostru momnisquosrepellatutvoluptas!

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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐