mui是一個高性能的HTML5開發框架，從UI到效率，都在極力追求原生體驗；這個框架自身有一些規則，剛接觸的同學不很熟悉，特總結本文；想了解mui更詳細的信息，請訪問mui官網
　　DOM結構
　　關于mui頁面的dom，你需要知道如下規則。
　　固定欄靠前
　　所謂的固定欄，也就是帶有.mui-bar屬性的節點，都是基于fixed定位的元素；常見組件包括：頂部導航欄（.mui-bar-nav）、底部工具條(.mui-bar-footer)、底部選項卡（.mui-bar-tab）;這些元素使用時需遵循一個規則：放在.mui-content元素之前，即使是底部工具條和底部選項卡，也要放在.mui-content之前，否則固定欄會遮住部分主內容；
### 一切內容都要包裹在mui-content中
除了固定欄之外，其它內容都要包裹在.mui-content中，否則就有可能被固定欄遮罩，原因：固定欄基于Fixed定位，不受流式布局限制，普通內容依然會從top:0的位置開始布局，這樣就會被固定欄遮罩，mui為了解決這個問題，定義了如下css代碼：

　　
　　[css]view plaincopy.mui-bar-nav~.mui-content{ padding-top:44px; } .mui-bar-footer~.mui-content{ padding-bottom:44px; } .mui-bar-tab~.mui-content{ padding-bottom:50px; } 你當然可以通過自定義CSS的方式實現如上類似效果，但為了使用簡便，建議將除固定欄之外的所有內容，全部放在.mui-content中。

　　始終為button按鈕添加type屬性
　　若button按鈕沒有type屬性，瀏覽器默認按照type=submit邏輯處理，這樣若將沒有type的button放在form表單中，點擊按鈕就會執行form表單提交，頁面就會刷新，用戶體驗極差。
　　窗口管理
　　頁面初始化：必須執行mui.init方法
　　mui在頁面初始化時，初始化了很多參數配置，比如：按鍵監聽、手勢監聽等，因此mui頁面都必須調用一次mui.init()方法；
　　頁面跳轉：拋棄href跳轉
　　當瀏覽器加載一個新頁面時，若頁面DOM尚未渲染完畢，頁面會先顯示空白，然后等DOM渲染完畢后，再顯示具體內容，這是WEB瀏覽器技術無法逾越的體驗障礙；為解決這個問題，建議使用[mui.openWindow方法](http://dcloudio.github.io/mui/javascript/)打開一個新的webview，mui會自動監聽新頁面的loaded事件，若加載完畢，再自動顯示新頁面；擴展閱讀：
　　hello mui中的無等待窗體切換是如何實現的
　　提示HTML5的性能體驗系列之一 避免切頁白屏
　　頁面關閉：勿重復監聽backbutton
　　mui框架自動封裝了頁面關閉邏輯，若希望自定義返回邏輯（例如編輯頁面的返回，需用戶確認放棄草稿后再執行返回邏輯），則需要重寫mui.back方法，切勿簡單通過addEventListener添加backbutton監聽，因為addEventListener只會增加新的執行程序，mui默認封裝的監聽執行邏輯依然會繼續執行，因此若僅addEventListener添加用戶確認框，則用戶即使選擇了取消，也會繼續關閉窗口。
手勢操作
　　點擊：忘記click
　　快速響應是mobile App實現的重中之重，研究表明，當延遲超過100毫秒，用戶就能感受到界面的卡頓，然而手機瀏覽器的click點擊存在300毫秒延遲（至于為何會延遲，及300毫秒的來龍去脈，請自行谷百），mui為了解決這個問題，封裝了tap事件，因此在任何點擊的時候，請忘記click及onclick操作，統統使用如下代碼：
　　[javascript]view plaincopy
　　element.addEventListener('tap',function(){
　　//點擊響應邏輯 });

不積跬步無以至千里

總結

以上是生活随笔為你收集整理的mui使用总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。