In mobile development, all list items are asynchronously loaded on one page. asynchronous list items

In mobile development, all list items are asynchronously loaded on one page. asynchronous list items

During WEB development, we often encounter paging processing. If a webpage is displayed on a PC, it is acceptable to use traditional paging. Therefore, when we design interfaces for mobile phones or other mobile terminals, It is awkward and difficult to use pagination. At this time, we can load all list items on a single page. When the screen slides to the lowest end, the "click to load more" button will appear. When we click this button, more list information will be loaded to the current page. Of course, everything is asynchronous, so we use Jquery Ajax to communicate with the backend ThinkPHP Action.

Next let's take a look at the front-end code: HTML

<Div class = "row"> JavaScript:
Var p = 1;
Function more ()
{
P ++;
// Alert (p );
 
$. Get ('/doc/more', {'page': p, 'parameter 1': Value of parameter 1, 'parameter 2': Value of parameter 2
......}, Function (data)
{
If (data)
$ ('# BikeList'). append (data );
Else
Alert ("no more information ");
});
}
Code in ThinkPHP Action:
Public function more ($ page, $ sn, $ bk, $ fd, $ dr)
{
$ Page = $ _ GET ['page'];
$ Parameter 1 = $ _ GET ['parameter 1'];
$ Parameter 2 = $ _ GET ['parameter 2'];
......
$ Pcount = 10; // number of lists loaded each time
$ BikeList = $ this-> getbikeList (parameter 1, parameter 2 ,......, $ Page, $ pcount );
$ This-> bikeList = $ bikeList;
$ This-> display ();

}
For the sake of convenience, we have also created a view for the More function here. We don't need to write a large part of HTML. The view code More.html is as follows:
<Volist name = "bikeList" id = "vobike">
Specific list items ......
</Volist>
The HTML code output by more.html is the value of the data parameter in the previous Jquery function more. The above is my sharing of development experience. I hope to inspire you and look forward to communicating with you.
This article is first published on top search. For more information, see the source.