mui dcloud 提示框的样式修改mui.toast

2017-2-20 mubrand 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;}


********************************华丽风格线******************************

但是此效果仅仅在网页版可以实现,此方法可用于H5网站,或者微信端

APP想要做此种效果,还需要进行以下修改:


因为mui.toast的源码里 有这样一句

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

找到这句话,在mui.js里,mui.min.js里压缩过,估计不好找,所以当前页面需要调用mui.js

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


如下:这样的话直接调用H5的提示样式,而不再是使用plus.nativeUI.toast相关参数


function($, window) {
	var CLASS_ACTIVE = 'mui-active';
	/**
	 * 自动消失提示框
	 */
	$.toast = function(message) {
		//if ($.os.plus) {
			//默认显示在底部;
		//	$.plusReady(function() {
		//		plus.nativeUI.toast(message, {
		//			verticalAlign: 'bottom'
		//		});
		//	});
		//} else {
			var toast = document.createElement('div');
			toast.classList.add('mui-toast-container');
			toast.innerHTML = '<div class="' + 'mui-toast-message' + '">' + message + '</div>';
			toast.addEventListener('webkitTransitionEnd', function() {
				if (!toast.classList.contains(CLASS_ACTIVE)) {
					toast.parentNode.removeChild(toast);
				}
			});
			document.body.appendChild(toast);
			toast.offsetHeight;
			toast.classList.add(CLASS_ACTIVE);
			setTimeout(function() {
				toast.classList.remove(CLASS_ACTIVE);
			}, 2000);
		//}
	};

}




标签: hbuilder mui

评论:


2017-11-07 22:27
今天看了文档,发现可以直接配置
void plus.nativeUI.toast( message, options );
参数:
message: ( String ) 必选 提示消息上显示的文字内容
options: ( ToastOptions ) 可选 提示消息的参数
可设置提示消息显示的图标、持续时间、位置等。
mubrand
2017-11-11 19:47
@陈:可能是后来hb更新的:)

发表评论:

联系我(QQ/PHONE/WX):18603469707 晋ICP备16009925号-1