mubrand 甲木产品前端

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

评论：

晋公网安备 14010602060801号