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

需求:

在页面内弹出半屏的弹窗或在页面内加载一个全屏的子页面时,用户进行返回操作会直接离开当前页面,不符合用户预期,预期应为关闭当前弹出的组件。
为此官方提供“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有:
小程序监听返回、阻止页面返回、弹框后禁止返回_第1张图片
参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

你可能感兴趣的:(小程序,前端)