小程序应用中page-container的使用

在开发小程序中经常使用各种半屏弹窗之类的东西，如果自己实现的话，通常是一个全屏遮罩层，一个遮罩层中的内容展示区域

但是这样的遮罩层用户体验不好，无法拦截手势操作，以达到用系统手势操作关闭遮罩层的效果，往往，一个返回就直接退出到上一页了

当时为了兼容ios App(使用的uniapp)

 便采用了兼容性的写法，后来单独招了一个ios开发，现在回过来便想着用这个东西优化一下之前的弹窗，page-container在微信与支付宝都支持,prop 也大同小异，这里我拿微信来举例子

首先使用起来很简单，它的ui表现形式就是一个popup类型的弹窗

<script setup lang="ts">
const show = ref(false);

const open = () => {
  show.value = true;
}
const close = () => {
  show.value = false;
}

</script>

<template>
    <div>
      <button @click="open">打开page-container</button>
    </div>
    <page-container :show="show">
      <view class="h-400rpx">我是内容</view>
    </page-container>
</template>

打开之后就是一个这样的效果

 然后你点击非内容区域会自动关闭，当然系统返回键也会关闭，但是这样的话，下次再点击按钮就打不开了，需要在关闭的时候手动将show设置为false,改改代码：

    const close = () => {
  show.value = false;
}

const onBeforeLeave = () => {
  close()
}

<page-container :show="show" @beforeleave="onBeforeLeave">
      <view class="h-400rpx">我是内容</view>
    </page-container>

那么，如果把这个弹窗拉全屏，就可以模拟成页面,

然后就可以在对应生命周期中做事情

 然后还可以搭配share-element来实现共享元素动画过渡的效果.