Mui top slide refresh and drop-down loading example

1. First, you must bind a Mui-scroll-wrapper style and a container ID to a slide element.

For example

　　　　

<div class="mui-content mui-scroll-wrapper" id="refreshContainer"><ul id="siteList"></ul>                 </div>

2. Configure the drop-down and slide-up components.

VaR flag = false; Mui. init ({pullrefresh: {container: "# refreshcontainer", // refresh the container ID from the drop-down list. You can use CSS selectors that queryselector can locate, such as ID and ,. class, etc. up: {Height: 10, // optional. the default value is 50. trigger pull load drag distance contentrefresh: "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 without more data; Auto: false, // optional, default: false. call back: upperskid // required, refresh function, written according to specific business, for example, get new data from the server through Ajax;}, down: {style: 'circle', // required, pull-down refresh sample Type. Currently, the native 5 + 'circle' style color: '# 2bd009' is supported. // optional. The default "#2bd009" drop-down refresh control color Height: '50p ', // optional. The default value is 50px. the height of the pull-down refresh control, range: '100px ', // optional, default: 100px. The range of the drag-down control can be offset: '0px', // optional, default: 0px, the start position of the pull-down refresh control is Auto: false, // optional. The default value is false. call back: refresh // required, refresh function, written according to specific business, for example, get new data from the server through Ajax ;}}}); function refresh () {flag = false; Mui ('# refreshcontainer '). pullrefresh (). refresh (true); resetdata (); setTimeout (function () {Getsitedata () ;}, 500) ;}function upperskid () {// Mui ('# sitelist '). pullrefresh (). endpulluptorefresh (FLAG); // If the parameter is true, no more data is available. Page = pagesize * indexnum; setTimeout (function () {Mui ('# refreshcontainer '). pullrefresh (). endpulluptorefresh (FLAG); // If the parameter is true, no more data is available. Getsitedata ();}, 500 );}

3. Data Retrieval Interface

Function getsitedata () {$. ajax ({URL: "url", type: "Get", data :{}, datatype: "jsonp", // specify the Data Type jsonp: 'callback' returned by the server ', success: function (data) {var result = JSON. parse (data); // converts a JSON object to a string if (result. total> 0) {sitelistdata = sitelistdata. concat (result. rows); showdata (sitelistdata); // render data function} else {sitelistdata = []; showdata (sitelistdata);} If (flag = false) {indexnum ++ ;} if (result. rows. length <pagesize) {// determines whether there is no data flag = true} Mui ('# refreshcontainer') if the number of retrieved data is smaller than the number of queries per page '). pullrefresh (). endpulldown ();}});}

　　

　　

Mui top slide refresh and drop-down loading example