MUI development considerations, the need for friends can refer to the next.
MUI is a high-performance HTML5 development framework, from UI to efficiency, in the pursuit of native experience, the framework itself has some rules, just contact with the classmate is not very familiar with, special summary of this article; to learn more about MUI, visit the MUI website
DOM structure for the DOM of the MUI page, you need to know the following rules.
Fixed bar The so-called fixed bar, which is the node with the. Mui-bar attribute, is based on the fixed positioned element; Common components include: Top navigation bar (. Mui-bar-nav), bottom toolbar (. mui-bar-footer), Bottom tab (. mui-bar-tab); These elements are subject to a rule: before the. mui-content element, even the bottom and bottom tabs are placed before the. Mui-content, otherwise the fixed bar obscures some of the main content;
# # # Everything is wrapped up in a mui-content
In addition to the fixed bar, everything else is wrapped in. Mui-content, otherwise it may be masked by a fixed bar, because the fixed bar is based on fixed positioning and is not constrained by streaming layout, the normal content will still start from the position of top:0, so it will be masked by the fixed bar, MUI in order to solve this problem, the following CSS code is defined:
. Mui-bar-nav ~. mui-content {padding-top:44px;}. Mui-bar-footer ~. mui-content {padding-bottom:44px;}. Mui-bar-tab ~. mui-content {padding-bottom:50px;}
You can certainly do this with a custom CSS, but for ease of use, it is recommended that everything except the fixed bar be placed in the. mui-content.
Always add the Type property for button buttons if the button does not have the Type property, the browser defaults to Type=submit logic, so that if a button with no type is placed in the Form form, clicking the button executes the form submission, and the page refreshes , the user experience is extremely poor.
Window Management page Initialization: Mui.init method MUI must be executed when the page is initialized, many parameter configurations are initialized, such as: key listening, gesture monitoring, etc., so the MUI page must call the Mui.init () method;
Page Jump: Discard the href jump when the browser loads a new page, if the page Dom has not been rendered, the page will first appear blank, and then after the DOM rendering is complete, then display the concrete content, this is the Web browser technology insurmountable experience barrier; To solve this problem, we recommend using the [ Mui.openwindow Method] (http://dcloudio.github.io/mui/javascript/#openwindow) opens a new Webview,mui loaded event that will automatically listen to the new page. If the load is complete, the new page will be displayed automatically; Read more:
- How the no wait form switch in Hello MUI is implemented
- Tip HTML5 One of the performance experience series to avoid cutting pages white screen
Page closed: Do not repeat the Backbutton MUI framework automatically encapsulates the page closure logic, if you want to customize the return logic (such as the return of the edit page, the user must confirm the discard draft before the return logic), You need to rewrite the Mui.back method, do not simply add Backbutton listener through AddEventListener, because AddEventListener will only add a new execution program, the MUI default encapsulation of the listening execution logic will continue to execute, so if only addeventliste Ner The user confirmation box is added, the user will continue to close the window even if Cancel is selected.
Gesture Action Click: Forget click Fast Response is the most heavy in mobile app implementation, research shows that when the delay is more than 100 milliseconds, the user can feel the interface lag, but the phone browser Click Click there is a 300 millisecond delay (as to why the delay, and 300 milliseconds of the ins and outs, Please self-valley Hundred), MUI in order to solve this problem, encapsulates the tap event, so in any click, please forget the click and onclick operation, all use the following code:
Element.addeventlistener (' Tap ', function () {//Click response Logic});
MUI Development considerations
