🚀前言

在微信小程序的开发中，页面容器组件扮演着至关重要的角色。作为构建小程序界面的基本单位，页面容器组件不仅负责页面的布局和结构，还帮助开发者有效管理内容的展示和交互。合理使用页面容器组件，可以让你的应用界面更加清晰、整洁，提升用户体验。

本篇文章将深入探讨微信小程序中的页面容器组件，详细介绍其类型、常用属性及实际应用场景。我们将通过具体实例，帮助你理解如何灵活运用页面容器组件，设计出符合用户需求的高质量小程序界面。

无论你是刚入门的小程序开发者，还是希望提升开发技能的资深工程师，这篇文章都将为你提供实用的指导和灵感。让我们一起探索页面容器组件的魅力，打造出更加优秀的小程序应用吧！

🚀一、页面容器组件

回忆一下我们经常使用的一些移动端应用，弹窗弹层类的页面并不少见。小程序中的页面容器组件 page-container 就是专为这种场景设计的。对于页面中的弹窗，如果采用普通 view 容器的方式实现，虽然看上去没有问题，但是当用户点击返回按钮时，会使当前整个页面返回而不是关闭弹窗，这是不符合体验要求的，但使用page-container可以很好地处理返回逻辑。

🔎1.page-container 页面容器示例

🦋1.1 步骤 1: 创建页面文件

首先，在 pages 文件夹下新建一个名为 pageContainerDemo 的页面文件。

🦋1.2 步骤 2: 编写 pageContainerDemo.wxml 文件

在 pageContainerDemo.wxml 文件中，编写如下代码：

<!-- pages/pageContainerDemo/pageContainerDemo.wxml -->
<view class="container">
  <button bindtap="show">展示容器</button>
</view>
<page-container show="{{pageContainerShow}}">
  <view>容器内部的内容</view>
  <button bindtap="show">隐藏容器</button>
</page-container>

在上面的代码中，页面中创建了一个按钮来展示页面容器，同时在页面容器内添加了一个按钮来隐藏已经弹出的页面容器。

🦋1.3 步骤 3: 编写 pageContainerDemo.js 文件

在 pageContainerDemo.js 文件中，编写如下代码：

// pages/pageContainerDemo/pageContainerDemo.js
Page({
  data: {
    pageContainerShow: false,  // 默认容器不展示
  },
  show: function() {
    // 切换容器显示状态
    this.setData({
      pageContainerShow: !this.data.pageContainerShow
    });
  }
});

在 pageContainerDemo.js 中，定义了一个 show 方法来切换 pageContainerShow 状态。页面容器的显示与否通过 show 属性来控制。当点击按钮时，容器的显示状态会改变。

🦋1.4 说明

页面容器的展示与否是通过其 show 属性控制的。在页面容器展示出来后，效果如图所示。需要注意的是，一个页面中最多只能存在一个页面容器视图。

除了可以通过代码手动改变页面容器组件的 show 属性来实现关闭容器外，还可以通过以下方式关闭页面容器：

• 在 iOS 设备上使用右划手势。
• 在 Android 设备上点击返回按键。
• 调用小程序框架中的 wx.navigateBack 接口。

这样就完成了一个简单的页面容器切换效果的实现。

🔎2.page-container 属性解析

page-container 组件提供了许多包括组件位置、样式、动画等相关的可配置的属性，如表所示。