---
name: "page-container"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "page-container - 页面容器"
---

## page-container

> [VERSION] 基础库 >= 2.10.0

### 描述

页面容器，可从底部、顶部或居中弹出覆盖层。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `show` | `boolean` | 否 | `false` | 是否显示容器组件 |
| `duration` | `number` | 否 | `300` | 动画时长，单位毫秒 |
| `z-index` | `number` | 否 | `100` | z-index 层级 |
| `overlay` | `boolean` | 否 | `true` | 是否展示遮罩层 |
| `position` | `string` | 否 | `"bottom"` | 弹出位置，可选值：top 顶部，bottom 底部，right 右侧，center 居中 |
| `round` | `boolean` | 否 | `false` | 是否显示圆角 |
| `overlay-style` | `string` | 否 | `""` | 自定义遮罩层样式 |
| `custom-style` | `string` | 否 | `""` | 自定义弹出层样式 |

#### 事件

| 事件名 | 类型 | 描述 |
| --- | --- | --- |
| `beforeenter` | `(event: Object) => void` | 进入前触发 |
| `enter` | `(event: Object) => void` | 进入后触发 |
| `afterenter` | `(event: Object) => void` | 进入完成后触发 |
| `beforeleave` | `(event: Object) => void` | 离开前触发 |
| `leave` | `(event: Object) => void` | 离开后触发 |
| `afterleave` | `(event: Object) => void` | 离开完成后触发 |
| `clickoverlay` | `(event: Object) => void` | 点击遮罩层时触发 |

**beforeenter 的回调参数对象**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"beforeenter"` |  |

**enter 的回调参数对象**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"enter"` |  |

**afterenter 的回调参数对象**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"afterenter"` |  |

**beforeleave 的回调参数对象**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"beforeleave"` |  |

**leave 的回调参数对象**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"leave"` |  |

**afterleave 的回调参数对象**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"afterleave"` |  |

**clickoverlay 的回调参数对象**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"clickoverlay"` |  |

### 示例代码

#### 底部弹出带遮罩

*index.tyml*

```xml
<button bind:tap="showPopup">打开底部弹出层</button>
<page-container
  show="{{visible}}"
  position="bottom"
  round
  overlay
  duration="{{300}}"
  bind:clickoverlay="hidePopup"
>
  <view class="popup-content">
    <text class="popup-title">底部弹出层</text>
    <text class="popup-desc">点击遮罩关闭</text>
    <button bind:tap="hidePopup">关闭</button>
  </view>
</page-container>
```

*index.tyss*

```css
.popup-content {
  padding: 40rpx;
  min-height: 300rpx;
  background-color: #fff;
}
.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}
.popup-desc {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 32rpx;
}
```

*index.js*

```javascript
Page({
  data: { visible: false },
  showPopup() {
    this.setData({ visible: true });
  },
  hidePopup() {
    this.setData({ visible: false });
  },
});
```

#### 自定义样式与生命周期

*index.tyml*

```xml
<button bind:tap="showRight">右侧面板</button>
<page-container
  show="{{visible}}"
  position="right"
  round
  overlay
  z-index="{{200}}"
  duration="{{400}}"
  overlay-style="background-color: rgba(0,0,0,0.5)"
  custom-style="background-color: #f5f5f5"
  bind:beforeenter="onBeforeEnter"
  bind:afterenter="onAfterEnter"
  bind:beforeleave="onBeforeLeave"
  bind:afterleave="onAfterLeave"
  bind:clickoverlay="hideRight"
>
  <view class="panel">
    <text class="panel-title">右侧面板</text>
    <button bind:tap="hideRight">关闭</button>
  </view>
</page-container>
```

*index.tyss*

```css
.panel {
  width: 500rpx;
  padding: 40rpx;
  min-height: 100vh;
}
.panel-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
}
```

*index.js*

```javascript
Page({
  data: { visible: false },
  showRight() {
    this.setData({ visible: true });
  },
  hideRight() {
    this.setData({ visible: false });
  },
  onBeforeEnter() {
    console.log('进入前');
  },
  onAfterEnter() {
    console.log('进入后');
  },
  onBeforeLeave() {
    console.log('离开前');
  },
  onAfterLeave() {
    console.log('离开后');
  },
});
```