移动端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();

阅读 360

不定期推出前端相关文章,喜欢就支持一下~蟹蟹

6 声望
0 粉丝
0 条评论
你知道吗?

不定期推出前端相关文章,喜欢就支持一下~蟹蟹

6 声望
0 粉丝
宣传栏