小程序监听返回、阻止页面返回、弹框后禁止返回

我爱画页面

已于 2022-09-21 15:31:49 修改

阅读量5.8k

点赞数 1

文章标签：小程序前端

于 2022-09-21 15:25:04 首次发布

本文链接：https://blog.csdn.net/qdm13209211861/article/details/126973408

版权

需求：

在页面内弹出半屏的弹窗或在页面内加载一个全屏的子页面时，用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。
为此官方提供“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>