uVIew2 弹框滚动穿透问题-[uu-popup ]组件

弹框滚动穿透问题总结

问题描述

在 uni-app App 平台（app-plus）上，弹框（popup）打开时，点击弹框内部或遮罩区域，底层页面仍会跟随滚动。这就是"滚动穿透"问题。

涉及页面：

• src/pages/shop/goodsDetail.vue --- 服务门店弹框
• src/pages/mine/order/order.vue + orderComponent.vue --- 券码弹框、服务门店弹框、取消原因弹框

---

根本原因

1. App 平台原生滚动机制

在 App 平台，页面滚动默认由 WebView 的原生层 处理。JS 层的 preventDefault() 无法拦截原生滚动行为。这是与 H5 平台的本质区别。

H5：页面滚动 ← JS 可拦截 ← preventDefault() 有效
App：页面滚动 ← 原生层处理 ← JS preventDefault() 无效

2. u-sticky z-index 高于 uni-popup

u-sticky 组件吸顶时默认 z-index 为 970 （uView 配置），而 uni-popup 的 z-index 仅为 99。导致弹框遮罩无法覆盖顶部 tab 区域。

3. 嵌套 scroll-view 滚动穿透

当弹框内部也有 scroll-view 时，内部滚动事件会穿透到外层 scroll-view，导致两者同时滚动。

---

解决方案

方案一：用 <scroll-view> 替代原生滚动（核心方案）

原理 ：将页面内容包裹在 <scroll-view scroll-y> 中，用组件级滚动替代原生滚动。JS 的 preventDefault() 对组件级滚动有效。

<template>
  <view>
    <u-navbar ... />
    <!-- 用 scroll-view 替代原生页面滚动 -->
    <scroll-view scroll-y class="page-scroll-view" :style="{ height: '100vh' }">
      <!-- 所有页面内容 -->
    </scroll-view>

    <!-- 弹框放在 scroll-view 外面 -->
    <uni-popup ref="popup" type="center" @touchmove.stop.prevent>
      <view>弹框内容</view>
    </uni-popup>
  </view>
</template>

关键点：

• 弹框必须在 <scroll-view> 外面（同级），不能在内部
• 弹框需要加 @touchmove.stop.prevent
• scroll-view 需要设置固定高度（如 100vh）

---

方案二：动态禁用外层 scroll-y

原理 ：弹框打开时，将外层 scroll-view 的 scroll-y 设为 false，彻底禁用外层滚动。

<scroll-view :scroll-y="!popupOpen" :style="{ height: '100vh' }">
  <!-- 页面内容 -->
</scroll-view>

<uni-popup ref="popup" type="center" @change="onPopupChange">
  <!-- 弹框内容（内部可以有 scroll-view） -->
</uni-popup>

data() {
  return {
    popupOpen: false,
  };
},
methods: {
  openPopup() {
    this.popupOpen = true;
    this.$refs.popup.open();
  },
  closePopup() {
    this.popupOpen = false;
    this.$refs.popup.close();
  },
  onPopupChange(e) {
    if (!e.show) {
      this.popupOpen = false;
    }
  },
}

适用场景 ：弹框内部也有 scroll-view 时，防止嵌套滚动穿透。

---

方案三：提升弹框 z-index 覆盖 tab 区域

原理 ：u-sticky 的 z-index (970) 高于 uni-popup (99)，需要手动提升弹框层级。

/* 在 order.vue 的 style 中添加 */
.uni-popup {
  z-index: 9999 !important;
}

---

方案四：弹框提升到父页面层级

原理：当子组件（如 swiper-item 内的组件）中的弹框无法覆盖父页面的 tab 区域时，将弹框移到父页面。

做法：

1. 子组件移除弹框模板，改为 $emit 事件通知父组件
2. 父组件接收事件，在页面最外层渲染弹框
3. 弹框放在 swiper 外面（与 u-sticky 同级），遮罩可覆盖整个页面

<!-- 父页面 order.vue -->
<template>
  <view>
    <u-sticky>
      <u-tabs ... />
    </u-sticky>
    <swiper>
      <swiper-item>
        <order @open-code-popup="onOpenCode" ... />
      </swiper-item>
    </swiper>
    <!-- 弹框在 swiper 外面，遮罩可覆盖 tab -->
    <uni-popup ref="codePopup" type="center" @touchmove.stop.prevent>
      ...
    </uni-popup>
  </view>
</template>

---

各页面最终修改方案

goodsDetail.vue

问题	方案
弹框滚动穿透	页面内容包裹 <scroll-view>，弹框放外面 + @touchmove.stop.prevent
内部 scroll-view 嵌套穿透	外层 :scroll-y="!serviceStorePopupOpen"，弹框打开时禁用外层滚动

order.vue + orderComponent.vue

问题	方案
弹框在 swiper 内，遮罩无法覆盖 tab	弹框移到 order.vue 页面层级，子组件 emit 事件
u-sticky z-index 高于弹框	.uni-popup { z-index: 9999 !important; }
内部 scroll-view 嵌套穿透	同方案二（如需要）

---

踩坑记录

❌ 无效方案

方案	原因
直接在弹框上加 @touchmove.stop.prevent	App 原生滚动不受 JS 控制
DOM 捕获阶段 document.addEventListener('touchmove', ..., { capture: true })	同上，无法拦截原生滚动
透明遮罩层 z-index: 90 + @touchmove.stop.prevent	普通 view 的 touchmove 无法阻止原生滚动
仅包裹 <scroll-view> 不调整弹框位置	弹框在 swiper 内受 stacking context 限制，无法覆盖外部元素

⚠️ 注意事项

1. Vue 2 单根元素要求 ：模板必须只有一个根 <view>
2. uni-popup 用法 ：使用 ref.open()/close() 而非 :show 绑定；关闭事件是 @change 而非 @close；背景色用 background-color 而非 :bgColor
3. scroll-view 动态 scroll-y ：确保没有同时存在静态 scroll-y 属性和动态 :scroll-y 绑定（静态属性优先级更高）
4. 弹框关闭状态同步 ：监听 @change 事件，在弹框被遮罩点击关闭时同步重置状态

---

关键结论

App 平台滚动穿透的唯一可靠解决方案 ：用 <scroll-view> 替代原生页面滚动，使滚动行为进入 JS 可控范围。在此基础上配合弹框层级管理（z-index）和嵌套滚动禁用（动态 scroll-y），才能彻底解决滚动穿透问题。