空數據頁面居中小記

今天遇到一個老項目組件的改造，下面簡稱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 ^