High-performance front-end frame-mui closest to native app experience

Objective

Lightweight, native UI, fluent experience, is the three characteristics of MUI.

1. Beginner's Guide

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

2. Native UI

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
  1. 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:
    1. No additional sub-webview performance consumption compared to dual WebView
    2. 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