最接近ios設計風格的移動端頁面前端框架-mui

很早的時候看朋友編寫一個app前端頁面的時候就接觸到mui了。然後在最近的一次專案頁面開發中正式體驗了一番這款框架。

<u style="box-sizing: border-box;">先來個預覽看看</u>

<iframe height="568" src="http://www.dcloud.io/hellomui" frameborder="0" scrolling="no" style="box-sizing: border-box;"></iframe>

框架特點：

1.輕量

追求效能體驗，是我們開始啟動MUI專案的首要目標，輕量必然是重要特徵；MUI不依賴任何第三方JS庫，壓縮後的JS和CSS檔案僅有100+K和60+K。

2.原生UI

鑑於之前的很多前端框架（特別是響應式佈局的框架），UI控制元件看起來太像網頁，沒有原生感覺，因此追求原生UI感覺也是我們的重要目標MUI以iOS平臺UI為基礎，補充部分Android平臺特有的UI控制元件。

3.流暢體驗

3.1下拉重新整理

為實現下拉重新整理功能，大多H5框架都是通過DIV模擬下拉回彈動畫，在低端android手機上，DIV動畫經常出現卡頓現象（特別是圖文列表的情況）； mui通過雙webview解決這個DIV的拖動流暢度問題；拖動時，拖動的不是div，而是一個完整的webview（子webview），回彈動畫使用原生動畫。 <u style="box-sizing: border-box;">檢視詳細介紹</u>

3.2側滑導航

mui提供了兩種側滑導航實現：webview模式和div模式，兩種模式各有優劣，適用於不同的場景。每種側滑實現模式，有不同的側滑動畫效果，主要分為四類：

• 動畫1：主介面移動、選單不動
• 動畫2：主介面不動、選單移動
• 動畫3：主介面和選單同時移動
• 動畫4：縮放式側滑（類手機QQ）

<u style="box-sizing: border-box;">檢視詳細介紹</u>

3.3滑動觸發操作選單

在手機應用中（特別是iOS平臺），很多操作選單都是滑動觸發的，比如簡訊介面，左滑顯示“刪除”按鈕，點選可以刪除該簡訊對話；郵件列表介面，左滑可以刪除，右滑可以標註為"已讀/未讀"狀態； mui的列表控制元件也支援滑動觸發操作選單功能，僅需按照特定格式拼裝DOM結構即可；另外，滑動還支援事件觸發，開發者可以通過監聽滑動事件（slideleft/slideright），完成操作前的確認提醒工作。