mui.toast样式风格及位置修改教程

分类：MUI

toast

使用了mui.toast来实现可自动消失的信息提示效果。
但默认的显示效果太差了，很不显示，而且是在底部的。
如下图：

想改到屏幕的中间位置，再改大一点。
但官方并没有相关的文档教程，论坛也没找到相关的教程。
只好自己研究，最终发现。
消息框的DIV类为

<div class="mui-toast-container">  
<div class="mui-toast-message">  

</div>  
</div>

所以，就可以通过修改CSS来改变了。
我改后的最终效果如下：

CSS代码如下：

/*toast信息提示*/  
.mui-toast-container {bottom: 50% !important;}  
.mui-toast-message {background: url(/app/themes/default/images/toast.png) no-repeat center 10px #000; opacity: 0.6; color: #fff; width: 180px; padding: 70px 5px 10px 5px;}

2016-04-12 15:23 负责人:无分享

9 个回复

Jauns

支持分享

帝普一世 (作者) - 码农周

但好像在浏览器中有效，有APP中就无效了

周羊羊

这样改只在浏览器中有用，app上没效果，
因为mui.toast的源码里有这样一句

        if ($.os.plus) {  
            //默认显示在底部；  
            $.plusReady(function() {  
                plus.nativeUI.toast(message, {  
                    verticalAlign: 'bottom'  
                });  
            });  
        }

app都直接调用plus.nativeUI.toast了。
如果你需要定制的效果能通过改plus.nativeUI.toast的参数实现，app上可以直接调用plus.nativeUI.toast，不要用mui.toast
不然直接把上面那几行注释掉吧……
这样样式离底部距离消失时间都能自己控制了

周羊羊

怎么重新编辑答案啊，用最新版的mui.js(3.5+版本)，可以设置参数，在浏览器里强制使用div模式 http://dev.dcloud.net.cn/mui/ui/#toast

2017-02-21 11:03
Trust

回复周羊羊:每条回复最下面有个编辑啊。

2017-02-21 11:21
周羊羊

回复 Trust:好像限制了时间，刚发布的答案可以编辑，过一段时间就没那个选项了

2017-02-21 11:29