jQuery实现的上拉刷新功能组件示例
本文实例讲述了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 ↓