Implement pull-down refresh by using javascript + css3 in the APP _ javascript skills

This article will share with you how to use javascript in the APP and CSS 3 to implement the code for the pull-down refresh special effect. it is very simple and practical. if you need it, you can refer to it. The data list in the native app will use the pull-down refresh effect. in webapp, you can use iscroll, swiper, and other plug-ins or frameworks. how can you encode the data list by yourself to achieve similar results, the following describes the simple effects of using native js + css3.

Html layout

 
  
 Test   
Pull down to refresh data
 
 
 
  
  
List Data 1
 
  
  
List Data 2
 
  
  
List data 3
 
  
  
List Data 4
 
  
  
List Data 5
 
  
  
List Data 6
 
  
  
List Data 7
 
  
  
List Data 8
 
  
  
List data 9
 
  
  
List data 10
 
  
  
List Data 11
 
  
  
List Data 12
 
  
  
List Data 13
 
  
  
List Data 14
 
  
  
List data 15
 
  
  
List Data 16
 
  
  
List data 17
 
  
  
List data 18
 
  
  
List Data 19
 
  
  
List Data 20
 
  
  
List Data 21
 
  
  
List data 22
 
  
  
List Data 23
 
  
  
List data 24
 
  
  
List data 25
 
  
  
List Data 26
 
  
  
List Data 27
 
  
  
List data 28
 
  
  
List data 29
 
  
  
List data 30
 
 
 

Js logic

Var slide = function (option) {var defaults = {container: '', next: function () {}} var start, end, length, isLock = false, // whether to lock the entire operation isCanDo = false, // whether to move the slider isTouchPad = (/hp-tablet/gi ). test (navigator. appVersion), hasTouch = 'ontouchstart' in window &&! IsTouchPad; var obj = document. querySelector (option. container); var loading = obj. firstElementChild; var offset = loading. clientHeight; var objparent = obj. parentElement;/* operation method */var fn = {// Move the container translate: function (diff) {obj. style. webkitTransform = 'translate3d (0, '+ diff + 'px, 0)'; obj. style. transform = 'translate3d (0, '+ diff + 'px, 0)';}, // Set the effect time setTransition: function (time) {obj. style. webkitTransitio N = 'all' + time +'s '; obj. style. transition = 'all' + time +'s ';}, // return to the initial position back: function () {fn. translate (0-offset); // The identifier operation 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; // isLock = true; isCanDo = true; // save the current mouse Y coordinate start = hasTouch? Even. touches [0]. pageY: even. pageY; // remove the slider animation time fn. setTransition (0); loading. innerHTML = 'pull-down refresh data ';} return false;} // sliding function move (e) {if (objparent. scrollTop <= 0 & isCanDo) {var even = typeof event = "undefined "? E: event; // Save the Y coordinate of the current mouse end = hasTouch? Even. touches [0]. pageY: even. pageY; if (start <end) {even. preventDefault (); // remove the slider 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 end function end (e) {if (isCanDo) {isCanDo = false; // Determine whether the sliding distance is greater than or equal to the specified value if (end-start> = offset) {// Set the slider rebound time fn. setTransition (1); // retain the prompt part fn. translate (0); // execute the callback function loading. innerHTML = 'refreshing data'; if (typeof option. next = "function") {option. next. call (fn, e) ;}} else {// return the initial state fn. back () ;}}} slide ({container: "# container", next: function (e) {// execute the logic after loose, ajax request data, var that = this; setTimeout (function () {that. back. call () ;}, 2000 );}});

There are not many codes, but the details need to be improved.