空数据页面居中小记

今天遇到一个老项目组件的改造，下面简称noData组件，基本样式就是基于接口如果返回空数据或者出现报错的情况，页面（有可能是popup弹窗）正中间需要展示图片 + 文案 + 按钮的样式。
话不多说，直接上ui图：

最终展示图

实现方案很多，我先描述一下这个老组件原来的逻辑：

<view class="noData" style="height: {{height}}px">
	<view class="content">内容<view>
</view>

.content {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

height 是外部传来的props属性，根据height属性给内部组件设置高度，然后内部content的dom节点实现基于外层节点，也就是noData节点的高度居中。

问题：

1. 每次引用组件，都需要手动给height属性赋值（虽然设置了默认高度400），难用；
2. 设计师要求是相对于页面居中，没有满足效果。

我的实现

<view class="noData {{centerType + 'center'}}" >
	<view class="content">内容<view>
</view>

.pageCenter .content {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.areaCenter .content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.noData {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 15px;
}

代码比较简单，我大概说明一下：

• 首先废弃掉原来的height属性，不需要对noData设置默认高度给够空间。
• 默认是相对于页面居中布局，因此设置centerType 的值为page，采用pageCenter的类名进行渲染，用的是fixed固定定位布局，再结合transform: translate反向左，上平移该元素的50%长，高度即可实现；
• 如果是局部区域定位呢，得设置centerType为area值，然后由于absolute基于最近的一个非position: static属性的元素作为基准元素，设置局部区域居中。
  这是今天的一篇小记，完结，下班去了^ v ^