Paging plug-in idea: pc load more functions and mobile pull-down refresh load data, paging pc

Source: Internet
Author: User

Paging plug-in idea: pc load more functions and mobile pull-down refresh load data, paging pc

I don't think it's interesting to be playing lol by myself. I wrote this demo when I saw this pull-down refresh function!

This demo is relatively casual. We cannot use it as a plug-in. The basic idea is no problem. encapsulate it as needed!

Analyze the Code directly!

Layout:
<Ul class = "show-area" style = "min-height: 100px; "> </ul> <button class = 'page-btn-nick '> load more </button>

There are only two rows. It is enough to implement the function!

Js is not complicated either. First, define two variables throughout the demo and avoid global variables. Of course, it can also be used as a closure parameter during encapsulation!

Var m = 0, n = 2; // m: Number of button Clicks n: loading several data records at a time
Request:
$.ajax('paging.html')

Here, I will write the address of this page as the test url.

The processing of the following requests is the focus:

Var obj = {developer: [{name: 'Nick '}, {name: 'ljy'}, {name: 'xzl'}, {name: 'jeson '}, {name: 'yst'}, {name: 'zhw'}, {name: 'wqq'}]} response = obj. developer; // assume 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 (m-1); Certificate ('.page-btn-nick'0000.html ('No more '); $ ('. page-btn-nick '). attr ('Disabled ', 'Disabled');} else {data = response. slice (n * (S-1), n * m );}
Central idea:

Click the request button once and m + 1 to describe the requested data split as long as the required data;

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

The slice (s, e) function obtains a part of the requested data. The starting position of s: response and the ending position of e (the element at the position of e is not obtained ), the returned value is an array with no header or tail.

Since n data entries are loaded by default, m has already added 1, so s and e need to change accordingly;

Dynamically load data to the page:
                    var len=data.length;                    for(var i= 0;i<len;i++){                        elm+="<li>"+data[i].name+"</li>";                    }                    $('.show-area').append(elm);
The append () Here is better than html!

I think some developers are brave html (). In this way, every time a page is loaded, all li Resources in the page will be cleared and all li resources will be reloaded, I feel that I have to load a little redundant data every time, which is a waste of resources ......

I can see from the data above that the data requested each time is stored on slice () and added to the page. This requires that each time I load data, I only append the loaded data to the end of ul, and the previous li will not be cleared. The data to be loaded is the necessary data to be added each time, there are no repeated additions. Feel free to refer to it!

Later, I used the getData () of the request data as the button to click the event handler function and put it in the judgment drop-down event. Then I can click the button to dynamically load the data and refresh and load the data!

Complete code is attached:

<! DOCTYPE html> You can directly copy the complete code. Open webstorm and check it and test it!

The pull-down event on the Mobile End is taken over. For more information, see my blog on mobile sliding events!

You have limited technical skills. If you have any problems, please kindly advise me!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.