如何自定义toast的样式

因为默认的toast样式都是显示在底部,有时候体验不好,所以需要更改显示的位置。
为什么toast会默认显示在底部呢?那是因为mui.toast的源码里有这样的代码

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

如果想要修改mui.toast的样式的话 只需要在下面的CSS样式里面加上想要的代码

.mui-toast-container {
			top: 40% !important;			
}
			
.mui-toast-message {
	padding: 10px 25px;
	text-align: center;
	color: #fff;
	border-radius: 6px;
	background-color: #323232;
}

最重要的是你需要在HTML页面中的mui.toast里面加上

type: ‘div’ /* 是否使用h5绘制的对话框 */

mui.toast('MUI欢迎您', {
	type: 'div' /* 是否使用h5绘制的对话框 */
})

不加的话你会发现还是没有效果

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值