Use the MUI framework to simulate drop-down refreshes on the phone side, pull-up loading operations.

In one sentence of the official MUI document: "Developers need only care about the business logic to load more data." Really is a good frame.

Want to know more about this framework: http://dev.dcloud.net.cn/mui/

So how to implement pull-up refresh, pull down load of work?

First you need a container:

1 <!--Drop-down refresh container -2 <DivID= "Refreshcontainer"class= "Mui-content mui-scroll-wrapper">3  　　 <Divclass= "Mui-scroll">4  　　 <!--Data List -5  　　　　 <ulID= "Testul"class= "Mui-table-view Mui-table-view-chevron"></ul>6  　　 </Div>7 </Div>

The initialization operation is then performed by configuring the pull-up parameters from the Pullrefresh parameter in the Mui.init method:

Mui.init ({pullrefresh: {container:refreshcontainer,//To refresh the area identification, Queryselector can locate the CSS selector can be, such as: ID,. class, etc.Up : {height:40M//Optional. Default 50. Trigger Pull up load drag distanceAutotrue,//optional, default false. Automatic pull-up loading onceContentrefresh: "Loading ...",//Optional, the caption content that is displayed on the pull-up control when the state is being loadedContentnomore: ' There's no more data ',//Optional, when the request is complete if there is no more data to display the reminder content;Callback:p ullfresh-function //required, refresh function, according to the specific business to write, such as through Ajax from the server to obtain new data;    }  }});

Here focus on the callback parameter items, for the required content, the inside write refresh function, according to the specific business to write, in the actual project, usually through Ajax from the server to obtain data, and then HTML dynamic splicing, forming data items.

Here's a very simple example: (The ability to implement pull-down loading)

Container:

11<!--Drop-down refresh container -22<DivID= "Refreshcontainer"class= "Mui-content mui-scroll-wrapper">33<Divclass= "Mui-scroll">44<!--Data List -55<ulID= "Testul"class= "Mui-table-view Mui-table-view-chevron"></ul>66</Div>77</Div>

One will put the data into the id= "Testul" under the UL tag, the ID of course casually take

Call the Mui.init method:

1<script type= "Text/javascript" >2 Mui.init ({3 Pullrefresh: {4Container:refreshcontainer,//To refresh the area identification, Queryselector can locate the CSS selector can be, such as: ID,. class, etc.5 Up : {6HEIGHT:50,//Optional. Default 50. Trigger Pull up load drag distance7Autotrue,//optional, default false. Automatic pull-up loading once8Contentrefresh: "Loading ...",//Optional, the caption content that is displayed on the pull-up control when the state is being loaded9Contentnomore: ' There's no more data ',//Optional, when the request is complete if there is no more data to display the reminder content;TenCallbackfunction() {//required, refresh function, according to the specific business to write, such as through Ajax from the server to obtain new data; One  A                     /*add an Li to each load dynamically*/ -$ ("#testUl"). Append ($ ("<li>" +NewDate () + "</li>")); -  the                      This. Endpulluptorefresh (false); -                 }  -                 } -                 } +                 }); -</script>

In the callback parameter, the Load function is written, each time it is loaded, a Li tag is dynamically generated, and the current time is used as the test data, affixed to the Id=testul UL label.

here, notice the function of the callback in the last This.endpulluptorefresh (FALSE); indicates the end load, parameter optional true or false,true means end load, false continues to load, in the actual project application, usually based on the amount of data returned by the server to make a judgment.

over!! This will load the current time each time it is pulled down.

Use the MUI framework to simulate drop-down refreshes on the phone side, pull-up loading operations.