Objective
Lightweight, native UI, fluent experience, is the three characteristics of MUI.
Fast experience 1. Download the Hello MUI App
Download the packaged Hello MUI app, control UI and ability to experience MUI on your phone directly http://dcloud.io/hellomui/
2. Create a Hello MUI project
You can download Hbuilder from Https://www.dcloud.io, choose New "mobile App", select "Hello MUI" project template, create project, then connect your phone to your PC via the cable and click Run to experience MUI's ability on your phone.
Quickly build a page
3 Steps to a good page main frame
1. Create a new HTML file with MUI
In Hbuilder, create a new HTML file, select the HTML with MUI template, and you can quickly generate the MUI page template, which by default handles JS, CSS resource references for MUI.
2. Enter Mheader
The top title bar is what is required for each page, and you can quickly generate the top navigation bar by entering Mheader in Hbuilder.
3. Enter Mbody
In addition to the top navigation, the bottom tab two controls, other controls are recommended to be placed .mui-content
inside the control, and a mbody is entered in Hbuilder to quickly generate .mui-content
the included code block.
4. Complete code block, please refer to
Snippet
Add some Android-specific controls based on iOS 7
Here are a few common controls to introduce you
accordion (folding panel)
The collapse panel evolves from a two-level list, and the DOM structure is similar to the two-level list, as follows:
<ul class= "Mui-table-view" > <li class= "Mui-table-view-cell mui-collapse" > <a class= " Mui-navigate-right "href=" # > Panel 1</a> <div class= "mui-collapse-content" > <p> Panel 1 child content </p> </div> </li> </ul>
可以在折叠面板中放置任何内容;折叠面板默认收缩,若希望某个面板默认展开,只需要在包含.mui-collapse
类的li
节点上,增加.mui-active
类即可;mui官网中的方法说明,使用的就是折叠面板控件
List (lists)
1、普通列表
Lists are commonly used UI controls, and the MUI Encapsulated list component is simpler, simply ul
adding classes on the nodes, .mui-table-view
adding classes on the li
nodes, as shown in the .mui-table-view-cell
sample code
<ul class= "Mui-table-view" > <li class= "Mui-table-view-cell" >item 1</li> <li class= " Mui-table-view-cell ">item 2</li> <li class=" Mui-table-view-cell ">item 3</li></ul>
Picture Carousel
The image carousel inherits from the slide plug-in, so its DOM structure and events are the same as the slide plugin ;
DOM structure
Loop playback is not supported by default and the DOM structure is as follows:
<div class= "Mui-slider" > <div class= "Mui-slider-group" > <div class= "Mui-slider-item" > <a href= "#" ></a></div> <div class= "Mui-slider-item" ><a href = "#" ></a></div> <div class= "Mui-slider-item" ><a href= "#" > </a></div> <div class= "Mui-slider-item" ><a href= "#" ></a></div> </div></div>
Suppose the current picture carousel has 1, 2, 3, 44 pictures, from the 1th picture, then swipe left to switch the picture, when you switch to the 4th picture, continue to slide to the left, then there are two effects:
- Support Loop: Left slide, switch directly to the 1th picture;
- Loop not supported: Left slide, no response, continue to display the 4th picture, the user to display the 1th picture, you must continuously swipe to the right to switch to the 1th picture;
当显示第1张图片时,继续右滑是否显示第4张图片,是同样问题;这个问题的实现需要通过.mui-slider-loop
类及DOM节点来控制;
to support loops, you need to add classes on the nodes, and you .mui-slider-group
.mui-slider-loop
need to add 2 more pictures at a time, with the order of pictures changed to: 4, 1, 2, 3, 4, 1, as shown in the following code :
<div class= "Mui-slider" > <div class= "Mui-slider-group mui-slider-loop" > <!--support Loops, Need to repeat the picture node --<div class= "Mui-slider-item mui-slider-item-duplicate" ><a href= "#" ></a></div> <div class=" Mui-slider-item "><a href=" # "> </a></div> <div class= "Mui-slider-item" ><a href= "#" ></a ></div> <div class= "Mui-slider-item" ><a href= "#" ></a></ div> <div class= "Mui-slider-item" ><a href= "#" ></a></div> <!--support loops, need to repeat picture node-- <div class= "Mui-slider-item mui-slider-item-duplicate" ><a href= "#" ></a></div> </div></div>
Overview
In order to realize the pull-down refresh function, most H5 frames are pulled back by the div simulation, and on the low-end Android phone, the DIV animation often appears in the case of Kaka (especially the graphic list); MUI solves the problem of this DIV animation by using the native WebView drop-down refresh, and the drag effect is smoother;
A drop-down refresh of two modes is available here to suit different scenarios:
Single WebView mode
- Animation principle:
When the drop-down refreshes, the native drop-down refreshes the control, and the entire webview
position does not change, so the DOM redraw does not occur during the drag, when the control is dragged to a certain location to trigger the dynamic loading of the data and the refresh operation. This mode drop-down refreshes, compared to the dual WebView mode, does not create additional webview, better performance.
- How to use:
When MUI is initialized, the parameters are set in the same way as the pullRefresh
sub-page settings of the dual WebView mode.
Description
- DOM structure has no special requirements, just specify a drop-down to refresh the container identity
Mui.init ({ pullrefresh: { container: "#refreshContainer",//drop-down refreshes the container ID, queryselector can locate the CSS selector can be, such as: ID,. Class down: { style: ' Circle ',//required, dropdown refresh style, currently supports native 5+ ' circle ' style color: ' #2BD009 ',//optional, default ' #2BD009 ' Drop-down refresh control color height: ' 50px ',//optional, default 50px. Drop-down refreshes the height of the control, range: ' 100px ',//optional default 100px, the control can be pulled down by the range offset: ' 0px ',// Optional default 0px, the start position of the drop-down refresh control auto:true,//optional, default false. First load auto-pull refresh once callback:p ullfresh-function//required, refresh function, according to the specific business to write , such as obtaining new data from the server via Ajax;}} );
Mode Description:
- Advantages:
- Superior performance at two points:
- No additional sub-webview performance consumption compared to dual WebView
- No repainting occurs during drag-dragging, and performance consumption is reduced
- Disadvantages:
- currently only supports the ' cricle ' style and the color customization of the style
Dual WebView Mode
- Animation principle :
Use the double webview mode drop-down refresh, create a sub-webview add a list, drag, drag is a complete webview, avoid similar DIV drag smoothness of the problem, rebound animation using the original animation; on the IOS platform, the H5 animation has been more fluent, so still use H5 solution. The two platform implementations are different, but the MUI is encapsulated and can be used to implement a pull-down refresh using a set of code.
- How to use :
The main page content is relatively simple, just create a sub-page:
Mui.init ({ subpages:[{ url:pullrefresh-subpage-url,//dropdown Refresh content page address id:pullrefresh-subpage-id,//content page Flag styles:{ top:subpage-top-position,//content page top position, according to the actual page layout calculation, if using standard MUI navigation, the top default is 48px ... //other parameter definition } }]});
iOS平台的下拉刷新,使用的是 mui 封装的区域滚动组件, 为保证两个平台的 DOM 结构一致,内容页面需统一按照如下 DOM 结构构建:
<div id= "Refreshcontainer" class= "Mui-content mui-scroll-wrapper" > <div class= "Mui-scroll" > <!--data List- <ul class= "Mui-table-view mui-table-view-chevron" > </ul> </div> </div>
其次,通过 mui.init 方法中 pullRefresh 参数配置下拉刷新各项参数,如下:
Mui.init ({ pullrefresh: { container: "#refreshContainer",//drop-down refreshes the container ID, queryselector can locate the CSS selector can be, such as: ID,. Class down: { height:50,//optional, default 50. Trigger drop-down refresh drag distance, auto:true,//optional, default false. The first load auto drop-down refreshes once Contentdown: "Drop-down can be refreshed",//optional, when the drop-down can refresh the status, drop-down refreshes the caption content displayed on the control contentover: "Release immediate Refresh",//optional, when releasing the refreshed state, drop-down refreshes the caption content displayed on the control Contentrefresh: "Refreshing ...",//optional, while refreshing the state, drop-down refreshes the caption content displayed on the control callback:p ullfresh-function//required, refresh function, according to the specific business to write, For example, get new data from the server via Ajax;}} );
Mode Description:
- Advantages:
- You can customize the drop -down refresh style, change the text, and so on. Reference about custom drop-down Refresh style FAQ
- Disadvantages:
- Performance is much more expensive than single webview, but it's better than Div mode
- DOM structure requires uniform configuration
本文只写了一部分常用控件,所以不是很全面,大家可以参考官方文档去详细了解细节。
High-performance front-end frame-mui closest to native app experience