Use the MUI framework to simulate the pull-down refresh and pull-up operations on the mobile phone end ., Mui framework

Use the MUI framework to simulate the pull-down refresh and pull-up operations on the mobile phone end ., Mui framework

To use the mui official document: "developers only need to care about the business logic and load more data ". It is really a good framework.

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

So how can we implement the pull-down refresh and pull-up functions?

First, you need a container:

1 <! -- Pull-down refresh container --> 2 <div id = "refreshContainer" class = "mui-content mui-scroll-wrapper"> 3 <div class = "mui-scroll"> 4 <! -- Data list --> 5 <ul id = "testUl" class = "mui-table-view-chevron"> </ul> 6 </div> 7 </div>

Then perform initialization and pull the parameters through the pullRefresh parameter configuration in the mui. init method:

Mui. init ({pullRefresh: {container: refreshContainer, // id of the region to be refreshed. All css selectors that querySelector can locate can be used, such as id and ,. class, etc. up: {height: 50, // optional. the default value is 50. auto: true, // optional. The default value is false. automatically pull up and load contentrefresh once: "loading... ", // optional. When loading, the title content displayed on the pull-up control contentnomore: 'No More data' is displayed. // optional, the reminder content displayed when the request is complete. callback: pullfresh-function // required. Refresh the function and write it based on the specific business, for example, ajax is used to obtain new data from the server ;}}});

Here we will focus on the callback parameter items, which are mandatory. We will write a refresh function in it and write it based on the specific business. In actual projects, data is usually obtained from the server through ajax, then, the html is dynamically spliced to form data items.

 

 

 

The following is a simple example: (implement the pull-up function)

Container:

1 1 <! -- Pull-down refresh container --> 2 <div id = "refreshContainer" class = "mui-content mui-scroll-wrapper"> 3 <div class = "mui-scroll"> 4 4 <! -- Data list --> 5 5 <ul id = "testUl" class = "mui-table-view-chevron"> </ul> 6 6 </div> 7 </div>

Put the data under the ul tag id = "testUl" in a moment.

 

Call the mui. init method:

1 <script type = "text/javascript"> 2 mui. init ({3 pullRefresh: {4 container: refreshContainer, // id of the region to be refreshed. All css selectors that querySelector can locate can be used, such as id and ,. class, etc. 5 up: {6 height: 50, // optional. the default value is 50. auto: true, // optional. The default value is false. automatically pull up and load 8 contentrefresh: "loading... ", // optional. When loading, the title content 9 contentnomore: 'No More data' is displayed on the upper-load control. // optional, the reminder content displayed when the request is complete without more data; 10 callback: function () {// required. Refresh the function and write it according to the specific business, for example, ajax is used to obtain new data from the server. 11 12/* a dynamic li */13 $ ("# testUl") is added each time the server is loaded "). append ($ ("<li>" + new Date () + "</li>"); 14 15 this. endPullupToRefresh (false); 16} 17} 18} 19}); 20 </script>

In the callback parameter, the loading function is written. A li tag is dynamically generated each time it is loaded. The current time is used as the test data and pasted under the ul tag with id = testUl.

Pay attention to this at the end of the function in callback. endPullupToRefresh (false); indicates end loading. Optional values: true or false. true indicates end loading. false indicates Continue loading. In actual project applications, it is usually determined based on the data volume returned by the server.

 

Over !! In this way, the current time will be loaded for each pull.