DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-07-27 23:55
  • 更新:2017-07-27 23:55
  • 阅读:2719

一种更柔和的底部消息提醒控件示例

分类:MUI

一图胜千言:

{.mobile-screenshot}

相对中间弹框的方式,这是一种更柔和的提醒方式,不打断用户在主界面的操作过程;

实现方式很简单,生成一个固定底部的DIV即可,DOM结构如下:

<div class="message bottom">  
	<div class="icon">  
		<span class="mui-icon mui-icon-info"></span>  
	</div>  
	<p class="content">应用当前版本过低,存在安全漏洞,请升级至最新版</p>  
	<div class="action">  
		<button type="button" class="mui-btn mui-btn-blue mui-btn-link">取消</button>  
		<button id="install" type="button" class="mui-btn mui-btn-blue">立即升级</button>  
	</div>  
</div>

其余就是css代码,定义组件布局

.message {  
	background-color: #fff;  
	z-index: 99;  
	box-shadow: 0px -5px 5px 0px rgba(150, 150, 150, .2);  
}  
  
.message.bottom {  
	position: fixed;  
	padding: 15px;  
	bottom: 0;  
	left: 0px;  
	right: 0px;  
}  
  
.message .icon {  
	width: 42px;  
	height: 42px;  
	float: left;  
	text-align: center;  
}  
  
.message .content {  
	padding-left: 55px;  
	font-size: 13px;  
}  
  
.icon .mui-icon {  
	font-weight: 28px;  
	font-weight: 700;  
	line-height: 42px;  
	color: #007AFF;  
}  
  
.action {  
	text-align: right;  
	padding-right: 2px;  
	margin-top: 18px;  
}

完整代码示例参考github源码

9 关注 分享
c***@qq.com wenju Float 5***@qq.com 雪之梦技术驿站 Trust bishuihanshan 4***@qq.com 1***@qq.com

要回复文章请先登录注册

bishuihanshan

bishuihanshan

不错,mark
2017-11-23 09:31