帝普一世
帝普一世
  • 发布:2016-04-12 15:23
  • 更新:2019-04-15 15:17
  • 阅读:34740

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

分类:MUI

使用了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 分享
已邀请:
Jauns

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

Trust

Trust - 少说废话

Tomtail

Tomtail

App无效啊

极品飞车18

极品飞车18

浏览器中很有效,特意注册了一个号来点赞

师宁丶

师宁丶

显示的时长能 自定义吗

  • 694598490@qq.com

    可以的呀, mui.toast('登陆成功',{ duration:'long', type:'div' }) ,

    duration持续显示时间,默认值 short(2000ms)

    2019-01-16 11:51

656769413@qq.com

656769413@qq.com

使用低版本的mui.js会有在app中设置无效,需要最新的mui.js(3.5+),我用3.7.0试的是可以的

  • 逗逗水

    使用mui.min.js 3.7.0, 浏览器中有效果,真机测试无效果,请问是啥原因?

    2017-09-04 11:11

754927759@qq.com

754927759@qq.com

.mui-toast-container {top: 30% !important;}
调整位置加上这个就好了

要回复问题请先登录注册