Mui is a high-performance HTML5 development framework, from UI to efficiency, pursuing native experience; this framework has some rules, which are not very familiar to students who are just in contact with me, so I will summarize this article. If you want to know more detailed information about Mui, please visitMui official website
DOM structure
Regarding the dom of the mui page, you need to know the following rules.Fixed bar front
The so-called fixed bar, that is, nodes with .mui-bar attributes, are all elements positioned based on fixed; common components include: the top navigation bar (.mui-bar-nav), the bottom toolbar (.mui-bar-footer), and the bottom tab (.mui-bar-tab); these elements need to be followed when using: before the .mui-content element, even the bottom toolbar and the bottom tab should be placed before .mui-content, otherwise the fixed bar will cover some of the main content;### All content must be wrapped in mui-content
Except for the fixed column, all other content must be wrapped in .mui-content, otherwise it may be masked by the fixed column. Reason: The fixed column is based on Fixed positioning and is not restricted by streaming layout. Ordinary content will still be laid out from the position of top:0, so it will be masked by the fixed column. In order to solve this problem, Mui defines the following css code:
.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 similar effects like the above by customizing CSS, but for ease of use, it is recommended to put all content except the fixed column in .mui-content.
Always add type attribute to button button
If the button button does not have a type attribute, the browser will process it according to the type=submit logic by default. In this way, if the button without type is placed in the form form, click the button and the form form submission will be executed, and the page will be refreshed, which has extremely poor user experience.Window Management
Page initialization: The method must be executed
When the page is initialized, the mui initializes many parameter configurations, such as: key monitoring, gesture monitoring, etc. Therefore, the mui page must call the () method once;Page jump: abandon href jump
When the browser loads a new page, if the page DOM has not been rendered yet, the page will first show blank, and then wait for the DOM to render before displaying the specific content. This is an experience obstacle that WEB browser technology cannot overcome. To solve this problem, it is recommended to use [Method] (/mui/javascript/#openwindow) to open a new webview. Mui will automatically listen to the loaded event of the new page. If it is loaded, the new page will be automatically displayed; extended reading:- How to implement wait-free form switching in hello mui
- Prompt one of the performance experience series of HTML5 to avoid cutting pages and white screens
Page close: Do not listen to the backbutton repeatedly
Mui framework is automatically encapsulatedPage CloseLogic. If you want to customize the return logic (for example, if you want to edit the page return, you need to confirm that the user will abandon the draft before executing the return logic), you need to rewrite the method. Do not simply add backbutton listening through the addEventListener, because addEventListener will only add a new executor, and the listening execution logic encapsulated by Mui will continue to execute. Therefore, if only addEventListener adds the user confirmation box, the user will continue to close the window even if he chooses Cancel.Gesture operation
Click: Forgot click
Quick response is the top priority of mobile app implementation. Research shows that when the delay exceeds 100 milliseconds, users can feel the interface lag. However, there is a 300 millisecond delay in click clicking on mobile browsers (as for why it is delayed and the ins and outs of 300 milliseconds, please keep aside yourself). In order to solve this problem, Mui encapsulates tap events. Therefore, when clicking, please forget the click and onclick operations, and use the following code:('tap',function(){
//Click response logic
});