_javascript technique of drop-refresh and pull-load effect based on Iscroll.js

Now is not the era of pure Android dominating the world, H5 embedded Android hybrid hybrid development is the trend. Today brings you to the mobile end of the common "pull refresh, drop load" special effects, this effect will be based on H5 to achieve.

First look at the operation effect:

is not a little bit of ' chicken frozen ', it is by us today to introduce the protagonist ' Iscroll.js ' realization, Next i in the most convenient way to teach you ~ ~

Implementation steps

First, prepare the Iscroll.js library.

To the official website download can:
Https://github.com/cubiq/iscroll

Second, build the page structure

<! DOCTYPE html>  

The code is very simple, needless to say, just build a static structure ~ ~

The effect is as follows:

In contrast to this effect diagram to see the above code is simply too easy, temporarily and iscroll no half cents relationship, is a pure static page, at this time you are the only not the following small icon, do not worry, the article will eventually give you ~ ~

Second, complete JS code

<script type= "Application/javascript" src= "iscroll.js" ></script> <script type= "Text/javascript" >

var myscroll, Pulldownel, Pulldownoffset, Pullupel, pullupoffset, generatedcount = 0;  /** * Drop-down Refresh (custom implementation of this method) * Myscroll.refresh (); After data loading completes, call interface Update method/function Pulldownaction () {settimeout (function () {//<--simulate network congestion, Remo
  ve settimeout from production!
  Var El, Li, I;

  el = document.getElementById (' thelist ');
   For (i=0 i<3; i++) {li = document.createelement (' li ');
   Li.innertext = ' Add three ice ' + (++generatedcount);
  El.insertbefore (Li, el.childnodes[0]);  } Myscroll.refresh (); After data loading completes, invoke interface Update method Remember to refresh when contents are loaded (Ie:on ajax completion)}, 1000);
<--Simulate network congestion, remove settimeout from production!  /** * Scrolling page (custom implementation of this method) * Myscroll.refresh ();  After data loading completes, call interface Update method/function Pullupaction () {settimeout (function () {//<--simulate network congestion, remove SEttimeout from production!
  Var El, Li, I;

  el = document.getElementById (' thelist ');
   For (i=0 i<3; i++) {li = document.createelement (' li ');
   Li.innertext = ' Add three ice ' + (++generatedcount);
  El.appendchild (Li, el.childnodes[0]);  } Myscroll.refresh (); After data loading completes, invoke interface Update method Remember to refresh when contents are loaded (Ie:on ajax completion)}, 1000);
<--Simulate network congestion, remove settimeout from production!
 /** * Initialize Iscroll control/function loaded () {Pulldownel = document.getElementById (' pulldown ');
 Pulldownoffset = Pulldownel.offsetheight; 
 Pullupel = document.getElementById (' Pullup ');

 Pullupoffset = Pullupel.offsetheight; Myscroll = new Iscroll (' wrapper ', {scrollbarclass: ' Myscrollbar ',/* IMPORTANT style * * * usetransition:false,/* This property does not know the intention, I from true Change to False/Topoffset:pulldownoffset, onrefresh:function () {if (PullDownEl.className.match (' loading ')) {Pul
    Ldownel.classname = '; Pulldownel.queryselector ('. Pulldownlabel '). InnerHTML= ' Drop-down refresh ... ';
    else if (pullUpEl.className.match (' loading ')) {pullupel.classname = ';
   Pullupel.queryselector ('. Pulluplabel '). InnerHTML = ' pull loading more ... ' }, Onscrollmove:function () {if (This.y > 5 &&!pulldownel.classname.match (' Flip ') {Pulldownel
    . ClassName = ' Flip ';
    Pulldownel.queryselector ('. Pulldownlabel '). InnerHTML = ' Let go of the update ... ';
   this.minscrolly = 0;
    else if (This.y < 5 && pullDownEl.className.match (' Flip ')) {pulldownel.classname = ';
    Pulldownel.queryselector ('. Pulldownlabel '). InnerHTML = ' drop-down refresh ... ';
   this.minscrolly =-pulldownoffset; else if (This.y < (this.maxscrolly-5) &&!pullupel.classname.match (' Flip ')) {pullupel.classname = ' Fli
    P ';
    Pullupel.queryselector ('. Pulluplabel '). InnerHTML = ' Let go of the update ... ';
   this.maxscrolly = this.maxscrolly;
    else if (This.y > (this.maxscrolly + 5) && pullUpEl.className.match (' Flip ')) {pullupel.classname = '; Pullupel.querYselector ('. Pulluplabel '). InnerHTML = ' pull loading more ... '
   this.maxscrolly = Pullupoffset;
    }, Onscrollend:function () {if (PullDownEl.className.match (' Flip ')) {pulldownel.classname = ' loading ';    
    Pulldownel.queryselector ('. Pulldownlabel '). InnerHTML = ' loading ... '; Pulldownaction ();
   Execute Custom Function (Ajax call?)
    else if (pullUpEl.className.match (' Flip ')) {pullupel.classname = ' loading ';    
    Pullupel.queryselector ('. Pulluplabel '). InnerHTML = ' loading ... '; Pullupaction ();
   Execute Custom Function (Ajax call?)

 }
  }
 });
settimeout (function () {document.getElementById (' wrapper '). Style.left = ' 0 ';}, 800);
///Initialize the bound iscroll control Document.addeventlistener (' Touchmove ', function (e) {E.preventdefault ();}, False);

Document.addeventlistener (' domcontentloaded ', Loaded, false);
 </script>

So much code to see Ah, don't worry, pick a few points to you say:

1 Onrefresh function refers to the page refresh or invoke the Refresh () function will trigger this function, the inside code mainly do "some reset style and text" processing.

2 Onscrollmove function refers to drag and drop the page, do not let go when it triggers this function, inside the main code to do "The arrow has a rotating effect and let go of the hint" treatment.

3 Onscrollend function refers to the release of the hand, stop dragging the time will trigger the function, inside the code mainly do "refresh data and some load animation effect" processing.

4) Topoffset property is mainly able to hide a height, just pull down the refresh to hide out

5 function Pulldownaction and pullupaction, I am using the createelement function to create data, but in real development, this can be replaced by AJAX request server data

Let's see how it works:

Now the data can be refreshed, just a little bit, if the Drop-down and Oberra, the small loaded icon has an animation effect that is super "perfect":

Since it is to point to animation effect, it is certainly with the latest CSS3 technology Ah, nonsense not to say, directly paste the complete code:

<! DOCTYPE html>  

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.