PC load more features and move end down pull refresh load data _javascript tips

Feel a person to play lol also uninteresting, play will mobile phone, see this drop-down refresh function wrote this demo!

This demo write more casual, I can not use as Plug-ins, the basic idea is no problem, to use their own encapsulation it!

Directly on the code analysis under it!

Layout:

<ul class= "Show-area" style= "min-height:100px;" ></ul>
<button class= ' Page-btn-nick ' > load more </button>

Just 2 lines, just to achieve the function, enough!

JS is not complicated, first define 2 variables, throughout the demo, into the global variable, of course, the encapsulation can also be used as a closure parameters!

var m=0,n=2;//m:button clicks N: Load several data at a time

Request:

$.ajax (' paging.html ')

Here I will write the address of this page as a test URL.

The following successful request processing is the key:

     var obj={developer:[{name: ' Nick '},{name: ' Ljy '},{name: ' Xzl '},{name: ' Jeson '},{name: ' Yst '},{name: ' ZHW '},{name: ' Wqq '}]}
     response=obj.developer;//assumes that the requested data is obj
     m++;
     var data= ', elm= ';
     if (m> (Response.length%n==0?response.length/n:parseint (response.length/n))) {
      data=response.slice (n) (m-1) );
      $ ('. Page-btn-nick '). HTML (' no More ');
      $ ('. Page-btn-nick '). attr (' disabled ', ' disabled ');
     } else{
      data=response.slice (n (m-1), n*m);
     

Central:

Request button Click once, M+1, say the requested data splitting, as long as the data required;

Data=response.slice (n (m-1), n*m);

The slice (s,e) function obtains a portion of the requested data, the starting position of the s:response, the end of E (not taking an element of the E position), and the return value is an array with a header without tail.

Here because of the start of the default loading n data, M has been added 1, so we want S and e to correspond to the change;

To dynamically load data to a page:

     var len=data.length;
     for (var i= 0;i<len;i++) {
      elm+= "<li>" +data[i].name+ "</li>";
     }
     $ ('. Show-area '). Append (Elm);

Here the append () is better than HTML ()!

I see some developer is Yong's HTML (), so every time the load, all Li in the page will be emptied, in the reload all Li, feel every load to load a little redundant data, waste ah ...

Look at the data above to know that I am talking about each request of the data at slice () once, added to the page. This will write me every load, only this load of data append to the last of the UL, the former Li and will not empty, this data is to be loaded every time want to add the necessary data, no duplication, feel the point bar!

I put the request data GetData () as button click event Processing function, at the same time after the decision of the Drop-down event, you can realize the click button dynamic load data and Drop-down refresh load data!

Finally attach the complete code:

<! DOCTYPE html>  

You can copy the complete code directly, Webstorm open look, test it!

Moving the drop down event is a stroke, you can refer to the article I wrote about Mobile sliding events!

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.