最接近原生APP體驗的高效能前端框架 MUI

前言

1. 新手指南3步搭好頁面主框架

在hbuilder中，新建html檔案，選擇」含mui的html「模板，可以快速生成mui頁面模板，該模板預設處理了mui的js、css資源引用。

頂部標題欄是每個頁面都必需的內容，在hbuilder中輸入mheader，可以快速生成頂部導航欄。

除頂部導航、底部選項卡兩個控制項之外，其它控制項都建議放在.mui-content控制項內，在hbuilder中輸入mbody，可快速生成包含.mui-content的**塊。

snippet

2.原生ui

以ios 7為基礎，補充部分android特有控制項

下面給大家介紹幾個常用控制項

摺疊面板從二級列表中演化而來，dom結構和二級列表類似，如下：

可以在摺疊面板中放置任何內容；摺疊面板預設收縮，若希望某個面板預設展開，只需要在包含.mui-collapse類的li節點上，增加.mui-active類即可；mui官網中的方法說明，使用的就是摺疊面板控制項

1、普通列表

列表是常用的ui控制項，mui封裝的列表元件比較簡單，只需要在ul節點上新增.mui-table-view類、在li節點上新增.mui-table-view-cell類即可，如下為示例**

輪播繼承自slide外掛程式，因此其dom結構、事件均和slide外掛程式相同；

dom結構

假設當前輪播中有1、2、3、4四張，從第1張起，依次向左滑動切換，當切換到第4張時，繼續向左滑動，接下來會有兩種效果：

當顯示第1張時，繼續右滑是否顯示第4張，是同樣問題；這個問題的實現需要通過.mui-slider-loop類及dom節點來控制；

若要支援迴圈，則需要在.mui-slider-group節點上增加.mui-slider-loop類，同時需要重複增加2張，順序變為：4、1、2、3、4、1，**示例如下：

為實現下拉重新整理功能，大多數 h5 框架都是通過 div 模擬下拉回彈動畫，在低端 android 手機上，div 動畫經常出現卡頓現象（特別是**列表的情況); mui 通過使用原生 webview 下拉重新整理解決這個 div 動畫的卡頓問題，並且拖動效果更加流暢；

這裡提供兩種模式的下拉重新整理，以適用不同場景：

mui.init(
}});

模式說明：

缺點：

ios平台的下拉重新整理，使用的是 mui 封裝的區域滾動元件，為保證兩個平台的 dom 結構一致，內容頁面需統一按照如下 dom 結構構建：

其次，通過 mui.init 方法中 pullrefresh 引數配置下拉重新整理各項引數，如下：

mui.init(
}});

模式說明：

缺點：

本文只寫了一部分常用控制項，所以不是很全面，大家可以參考官方文件去詳細了解細節。