---
nav:
path: /components
group:
title: 数据展示
order: 8
toc: 'content'
---
# PageContainer 页面容器
页面级容器组件，提供加载状态、页面异常处理、顶部/底部安全边距等常用能力，开箱即用。
## 引入
在 `index.json` 中引入组件
```json
"usingComponents": {
"ant-page": "antd-mini/es/PageContainer/index"
}
```
## 代码示例
### 基本使用
```xml
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
```
```js
Page({
data: {
loading: true,
status: 'failed',
safeArea: 'both',
},
onLoad() {
setTimeout(() => {
this.setData({
loading: false,
});
}, 1000);
},
handleRefresh() {
my.reLaunch({
url: 'index',
fail(e) {
console.log(e);
},
});
},
handleSwitchToDisconnected() {
this.setData({
status: 'disconnected',
title: undefined,
message: undefined,
image: '',
});
},
});
```
### Demo 代码
#f5f5f5
| #121212
| 页面容器背景颜色 |