需求:

在页面内弹出半屏的弹窗或在页面内加载一个全屏的子页面时,用户进行返回操作会直接离开当前页面,不符合用户预期,预期应为关闭当前弹出的组件。
为此官方提供“page-container”容器组件,效果类似于 popup弹出层,页面内存在该容器时,当用户进行返回操作,关闭该容器不关闭页面。返回操作包括三种情形,右滑手势、安卓物理返回键和调用 navigateBack 接口。

具体使用:

  <page-container show="{{isShowTextarea}}" z-index="999999999" bind:beforeenter="beforeenter">
  <!-- 这里为自定义的弹框内容 -->
    <view class="show_textarea">
      <form bindsubmit="hideTextarea">
        <textarea style="height:calc(100vh - 200rpx);" confirm-type="done" auto-focus="true" class="textarea_box2" placeholder="输入文字(300字以内)" maxlength="300" name="textarea" id="subtitleWidth" value="{{subtitle}}"></textarea>
        <button form-type="submit" class="textarea_submit_ai" style="width: 200rpx;height: 70rpx;line-height: 70rpx;">确认</button>
      </form>
    </view>
  </page-container>

简单来说,就是把自己写的弹框,最外面标签换成page-container,用户点击导航栏的返回键、左滑操作返回等,会关闭这个弹框,而不会关闭整个页面。

详细的api有:
在这里插入图片描述
参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐