微信小程序页面嵌套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

相关推荐
胡gh2 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
言兴2 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_2 小时前
TailWind CSS
前端·css·postcss
烛阴3 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧3 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment4 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点5 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile5 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年5 小时前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel
古蓬莱掌管玉米的神5 小时前
coze娱乐ai换脸
前端