13. Drop-Down Refresh

In order to realize the pull-down refresh function, most H5 frames are through the div simulation pull back animation, on the low-end Android phone, Div animation often appear in the phenomenon of Kaka (especially the picture list); Through double webview to solve the problem of drag smoothness of this div; when dragging, it's not a div. , but a complete webview (sub-webview), the rebound animation using native animation, on the iOS platform, H5 animation has been more fluent, so still use H5 solution. Although the two platform implementations are different, they are encapsulated to enable a pull-down refresh using a set of code.

The first step: Create a sub-page, because the drag is actually the overall sub-page

mui.init ({        SUBPAGES:[{       url:pullrefresh-subpage-url, //drop-down Refresh content page address        id:pullrefresh-subpage-id , //content page flag       styles:{ top:subpage-top-position, //The top position of the content page, According to the actual page layout calculation, if using standard MUI navigation, the top default is 48px; .....//other parameters defined          }       }]  });  

The second step: the content page should be built according to the following DOM structure

Step three: Refresh each parameter by Pullrefresh parameter configuration in the Mui.init method

mui.init({     pullRefresh : {         container:"#refreshDiv",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等            down : {            contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容             contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容             contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容             callback : fn //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；         } } });

Fourth step: Set the execution function

functionfn() {     //业务逻辑代码，比如通过ajax从服务器获取新数据； ...... //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后             mui(‘#pullrefreshContainer‘).pullRefresh().endPulldownToRefresh();  //这行代码会隐藏掉 正在加载... 容器      }

 

13. Drop-Down Refresh