Mobile App Development MUI considerations

Fixed bar front

The so-called fixed bar, which is the node with the. Mui-bar attribute, is based on fixed positioned elements; 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 will be wrapped up in 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 a Type property, the browser defaults to Type=submit logic, so if you place a button with no type on the form form, clicking the button executes the form submission, the page refreshes, and the user experience is very poor.

Window Management page Initialization: The Mui.init method must be executed

MUI Initializes a number of parameter configurations when the page is initialized, such as keystroke monitoring, gesture monitoring, and so on, so the MUI page must call a Mui.init () method;

Page jump: Discard 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 specific content, this is the Web browser technology insurmountable experience barrier; To solve this problem, It is recommended to use the Mui.openwindow method to open a new webview,mui will automatically listen to the new page loaded event, if the load is complete, and then automatically display the new page;

Page closed: Do not repeat monitoring Backbutton

The MUI framework automatically encapsulates the page shutdown logic, and if you want to customize the return logic (for example, to edit the return of a page, you need to confirm that you discard the draft and then execute 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.

Mobile App Development MUI considerations