微信小程序页面嵌套web-view点击系统导航返回时进行弹窗处理

实现效果 :微信小程序页面嵌套web-view点击系统导航返回时进行弹窗处理

首先在web-view里是不可实现的(据我了解下来)

参考小程序文档:page-container

大致逻辑:

1、page-container可实现页面离开前拦截

2、由于web-view层级最高,导致page-container里弹窗展示不出来,可使用cover-view来做弹窗,page-container只做拦截作用

index.wxml:

javascript 复制代码
<!-- page.wxml -->
<web-view src="https://www.baidu.com"/>
<page-container
  show="{{showBackConfirm}}"
  bindbeforeleave="handleBackAttempt"
  bind:afterleave="resetInterceptor" 
>
</page-container>
<cover-view wx:if="{{isIntercepting}}" class="evaluate">
  <cover-view class="content">
    <cover-view>您觉得本次服务怎么样?</cover-view>
    <cover-view class="star-list">
      <cover-image class="star" src="/assets/collect-block.png"></cover-image>
      <cover-image class="star" src="/assets/collect-block.png"></cover-image>
      <cover-image class="star" src="/assets/collect-block.png"></cover-image>
      <cover-image class="star" src="/assets/collect-block.png"></cover-image>
      <cover-image class="star" src="/assets/collect-block.png"></cover-image>
    </cover-view>
    <cover-view class="btns">
      <button bind:tap="cancelBack">取消</button>
      <button bind:tap="confirmBack">已评价</button>
    </cover-view>
  </cover-view>
</cover-view>

index.js:

javascript 复制代码
Page({
  data: {
    showBackConfirm: true,
    isIntercepting: false // 状态锁,防止重复触发
  },

  // ✅ 核心拦截函数(修正导航栏返回不生效问题)
  handleBackAttempt() {
    if (!this.data.isIntercepting) {
      this.setData({
        showBackConfirm: true,
        isIntercepting: true // 加锁
      }, () => {
        // 确保弹窗渲染完成
        wx.nextTick(() => {
          return false; // 必须返回 false 才能拦截
        });
      });
    }
    return false; // 双重保险
  },

  // ✅ 用户确认返回
  confirmBack() {
    this.setData({
      showBackConfirm: false
    }, () => {
      setTimeout(() => wx.navigateBack(), 50); // 确保弹窗关闭后再返回
    });
  },
  // ✅ 用户取消返回
  cancelBack() {
    this.setData({
      showBackConfirm: true,
      isIntercepting: false // 解锁
    });
  },
  // ✅ Android 物理返回键专项处理
  onBackPress() {
    if (!this.data.isIntercepting) {
      this.setData({
        showBackConfirm: true
      });
      return true; // 必须返回 true 才能拦截
    }
    return false;
  },

  // ✅ 阻止 iOS 右滑穿透(关键!)
  preventSwipe() {
    return; // 空函数阻止默认滑动
  },

  // ✅ 重置拦截状态
  resetInterceptor() {
    this.setData({
      isIntercepting: false
    });
  }
})

代码片段:https://developers.weixin.qq.com/s/As1z2uma8Q0i

相关推荐
啃火龙果的兔子15 分钟前
CSS 预处理器(Preprocessor)和后处理器(Postprocessor)
前端·css
懋学的前端攻城狮17 分钟前
JavaScript作用域与闭包深度解析:从原理到实战
前端·javascript
晓得迷路了21 分钟前
栗子前端技术周刊第 92 期 - TypeScript 5.9、pnpm 10.14、Vite 下载量超 Webpack...
前端·javascript·vite
我不吃饼干8 小时前
在 React 中实现倒计时功能会有什么坑
前端·react.js
小小小小宇9 小时前
前端PerformanceObserver
前端
王者鳜錸9 小时前
PYTHON从入门到实践-18Django从零开始构建Web应用
前端·python·sqlite
拾光拾趣录9 小时前
ES6到HTTPS全链路连环拷问,99%人第3题就翻车?
前端·面试
haaaaaaarry10 小时前
Element Plus常见基础组件(二)
开发语言·前端·javascript
落雪小轩韩10 小时前
微信小程序性能优化与内存管理
微信小程序
xyphf_和派孔明10 小时前
关于echarts的性能优化考虑
前端·性能优化·echarts