Mui development considerations and mui considerations
Mui is a high-performance HTML5 development framework. From the UI to the efficiency, they all strive to pursue native experience. This framework has some rules and is not familiar to those who are new to it. I would like to summarize this article; for more information about mui, visitMui Official Website
About the dom structure of the mui page, you need to know the following rules.
The so-called fixed column on the front of the fixed column, that is,. the nodes in the mui-bar attribute are all fixed-based positioning elements. common components include: top navigation bar (. mui-bar-nav), tool bar (. mui-bar-footer), the bottom tab (. mui-bar-tab); these elements must follow a rule: put in. before the mui-content element, even the bottom toolbar and the bottom tab should be placed. before mui-content, otherwise the fixed column will cover part of the main content;
### All content must be wrapped in mui-content
Except for the fixed column, other contents must be wrapped in. in mui-content, otherwise it may be masked by Fixed columns. Reason: Fixed columns are positioned based on Fixed and are not restricted by the stream layout. Normal content will still be laid out from the top: 0 position, in this way, it will be masked by a fixed column. mui defines the following css code to solve this problem:
.mui-bar-nav ~ .mui-content {padding-top: 44px;}.mui-bar-footer ~ .mui-content {padding-bottom: 44px;}.mui-bar-tab ~ .mui-content {padding-bottom: 50px;}
Of course, you can achieve the above similar effect by using custom CSS, but for ease of use, we recommend that you put all content except the fixed column in. mui-content.
Always Add the type attribute for the button. If the button does not have the type attribute, the browser uses the type = submit logic by default. In this way, if the button without the type is placed in the form, click the button to execute form submission, and the page will be refreshed. the user experience is poor.
Window Management page initialization: mui must be executed. the init method mui initializes many parameter configurations during page initialization, such as button listening and gesture listening. Therefore, mui pages must call mui once. init () method;
Page jump: abandon href jump when the browser loads a new page, if the page DOM has not been rendered, the page will first display blank, and then wait until the DOM rendering is complete, then display the specific content, this is an insurmountable obstacle for WEB browser technology. To solve this problem, we recommend that you use [mui. openWindow method] (http://dcloudio.github.io/mui/javascript/#openwindow) open a new webview, mui will automatically listen to the loaded event of the new page, if the load is complete, then automatically display the new page; extended read:
- In hello mui, how does one implement form switching without waiting?
- Prompt HTML5 performance experience series to avoid page-cutting white screen
Page closing: Do not repeatedly listen to the backbuttonmui framework. The framework automatically encapsulates the page closing logic. If you want to customize the return logic (for example, to edit the page return logic, you must confirm to discard the draft and then execute the return logic ), you need to override mui. back method. Do not simply add a backbutton listener through addEventListener. Because addEventListener only adds new execution programs, the execution logic of the mui default encapsulation listener will continue to be executed, therefore, if only addEventListener is added to the user confirmation box, the user will continue to close the window even if he chooses to cancel it.
Click in a gesture operation: Forgetting to click quick response is the top priority of mobile apps. Research shows that when the latency exceeds 100 milliseconds, users can feel the stuck interface, however, the click-to-click latency of the mobile browser is 300 milliseconds (as for the latency and 300 milliseconds, you need to make your own attempts). To solve this problem, mui encapsulates the tap event, therefore, if you forget the click and onclick operations during any click, use the following code:
Element. addEventListener ('tap', function () {// click response logic });
