博客 / 詳情

返回

移動端MUI重寫alert優化提示框樣式及頁面加載動畫

問題場景1:

在移動端h5的開發中,因為前期開發使用了是原生的alert來提示,會有在不同機型樣式不統一,還會出現在彈窗標題出現網址的問題,顯示非常不友好,在mui項目中可以直接使用mui的alert組件實現消息提示來解決這個問題。但是因為長期下來alert的地方太多,改動量大,有沒有什麼一勞永逸的辦法。

解決方法:

直接重寫瀏覽器window下的alert函數

window.alert = function (msg, title) {...

這樣就能簡單的實現alert變為mui.alert效果了
直接在js執行比較靠前的地方引入以下js

//引用當前js注意會重寫以下函數
window.alert = function (msg, title) {
  if (typeof title === "undefined") {
    title = "提示";
  }
  mui.alert("" + msg, title);
};

問題場景2:

因為在移動端封殼的app瀏覽器的加載進度條在頂部不太顯眼,需要實現一個頁面進入的一個加載動畫:

解決方法:

//引入mui、muiLoading
//默認頁面進入時進行加載動畫
mui.showLoading();
window.onload = function () { 
  mui.hideLoading();
};

或者是在請求完成的時候進行mui.hideLoading();

user avatar flymon 頭像 abai_65056e27c0c30 頭像 user_p5fejtxs 頭像 beilee 頭像 steven_code 頭像 wuyuedexingkong 頭像 daimaxieshen 頭像 tyhan 頭像
8 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.