Native app in the data list will use the effect of Drop-down refresh, in the WebApp can be used Iscroll, swiper and other plug-ins or framework implementation, then how to code to achieve similar results, the following describes the use of native JS+CSS3 implementation of the simple effect.
HTML Layout
JS Logic
var slide = function (option) {var defaults={container: ', Next:function () {}} var start, end, length, Islock = false,//Whether the entire operation is locked Iscando = false,//Whether to move the slider Istouchpad = (/hp-tablet/gi). Test (navigator.appversion), hast
Ouch = ' ontouchstart ' in Window &&!istouchpad;
var obj = document.queryselector (Option.container);
var loading=obj.firstelementchild;
var offset=loading.clientheight;
var objparent = obj.parentelement;
/* Action method */var fn = {//Mobile container Translate:function (diff) {obj.style.webkittransform= ' Translate3d (0, ' +diff+ ' px,0) ';
Obj.style.transform= ' Translate3d (0, ' +diff+ ' px,0) ';
},//Set effect Time settransition:function (times) {obj.style.webkittransition= ' all ' +time+ ' s ';
obj.style.transition= ' All ' +time+ ' s ';
},//Return to the initial position back:function () {fn.translate (0-offset);
Identity operation completed Islock = false; }, Addevent:function (ELEMENT,EVENT_NAME,EVENT_FN) {if (Element.addeventlistener) {Element.addeventlistener (event _nAme, EVENT_FN, false);
else if (element.attachevent) {element.attachevent (' on ' + Event_Name, EVENT_FN);
else {element[' on ' + event_name] = EVENT_FN;
}
}
};
Fn.translate (0-offset);
Fn.addevent (obj, ' Touchstart ', start);
Fn.addevent (obj, ' touchmove ', move);
Fn.addevent (obj, ' touchend ', end);
Fn.addevent (obj, ' MouseDown ', start) fn.addevent (obj, ' MouseMove ', move) fn.addevent (obj, ' MouseUp ', end)//Slide start function Start (e) {if (objparent.scrolltop <= 0 &&!islock) {var even = typeof event = = "undefined"? e
: event;
Identity operation in Progress Islock = true;
Iscando = true; Save the current mouse y-coordinate start = Hastouch?
Even.touches[0].pagey:even.pagey;
Eliminate slide block animation time fn.settransition (0);
Loading.innerhtml= ' dropdown refresh data ';
return false; }//Sliding function Move (e) {if (objparent.scrolltop <= 0 && iscando) {var even = typeof event = = "Undef Ined "?
E:event; Save the current mouse y-coordinate end = Hastouch?
Even.touches[0].pagey:even.pagey; if (Start <
End) {Even.preventdefault ();
Eliminate slide block animation time fn.settransition (0);
Move the slider if ((end-start-offset)/2<=150) {length= (End-start-offset)/2;
Fn.translate (length);
else {length+=0.3;
Fn.translate (length);
}}}///sliding ending function end (e) {if (Iscando) {Iscando = false;
Determine if the sliding distance is greater than or equal to the specified value if (End-start >= offset) {//Set the slider rebound time fn.settransition (1);
Keep Tip part fn.translate (0);
Execute callback function loading.innerhtml= ' refreshing data ';
if (typeof Option.next = = "function") {Option.next.call (FN, E);
} else {//return initial state fn.back ();
}}} Slide ({container: "#container", Next:function (E) {//Let go after logic, AJAX request data, the data returned after the hidden load hint var that = this;
settimeout (function () {that.back.call ();
}, 2000);
}});
The code is not very large and the details need to be refined.