<think>
我们面对的问题是：在
使用uview的u
-popup组件时，如何禁止页面onPageScroll事件触发。这是因为当弹窗显示时，我们不希望页面滚动事件被触发（例如，可能有一些基于滚动事件的逻辑，如隐藏头部等）。
根据引用[5]中提到的，我们可以尝试给底层的view添加一个阻止滚动的事件，但这只能阻止滚动行为，并不能阻止onPageScroll事件的触发。因为onPageScroll是页面级的滚动事件，只要页面有滚动（哪怕是尝试滚动）就会触发。
然而，我们注意到onPageScroll事件在页面滚动时触发，所以如果我们能阻止页面滚动，那么onPageScroll就不会被触发。因此，我们可以通过以下思路：
1. 当弹窗显示时，设置页面为不可滚动（通过CSS或动态样式）。
2. 在弹窗关闭时，恢复页面滚动。
在
uniapp中，我们可以
使用`page
-meta`组件动态设置页面样式，或者通过动态类名的方式设置页面为fixed定位，从而禁止滚动。
具体方案：
方案一：
使用page
-meta动态设置页面overflow
在页面中添加page
-meta组件，动态设置页面的overflow样式。
方案二：
使用动态类名
在页面最外层view上绑定一个类，当弹窗显示时，添加一个类，该类设置样式为fixed定位，并宽高100%，这样页面就不会滚动了。
但是注意：在
uniapp中，页面最外层是page，但我们不能直接给page加类名，所以通常我们在页面最外层
使用一个view包裹，并设置高度100%。
下面我们分别实现这两种方案：
方案一：
使用page
-meta（推荐，因为这是
uniapp提供的原生方式）
在页面中添加：
```html
<template>
<view>
<!
-- 动态设置页面样式
-->
<page
-meta :page
-style="
popupShow ? 'overflow: hidden; height: 100%;' : ''"></page
-meta>
<!
-- 页面内容
-->
<u
-popup :show="
popupShow" @close="
popupShow = false">
<!
-- 弹窗内容
-->
</u
-popup>
</view>
</template>
```
注意：这里设置`overflow: hidden`和`height: 100%`是为了确保页面不会滚动。但是，在iOS上，有时候仅仅设置`overflow: hidden`可能还不够，因为iOS有弹性滚动。所以我们可以加上`position: fixed`，但是注意，
使用position: fixed会导致页面回滚到顶部。因此，我们可以在弹窗打开时记录当前滚动位置，关闭时恢复。
但如果我们只是要阻止onPageScroll触发，那么禁止滚动即可。不过，如果页面内容很长，设置`overflow: hidden`后，页面会回到顶部吗？不会，只是禁止滚动，位置还在。
但是，在微信小程序中，page
-meta设置overflow:hidden可能会失效，这时我们可以结合方案二。
方案二：动态类名（兼容小程序）
在页面最外层的view上添加一个类，当弹窗显示时，设置这个view为fixed定位，并记录当前的滚动位置，关闭时恢复。
步骤：
1. 在页面最外层view
使用一个类，比如`page
-container`，并设置高度100%和允许滚动（默认）。
2. 当弹窗显示时，给这个view添加一个类，比如`fixed
-page`，这个类的样式是`position: fixed; top:
-${scrollTop}px; left: 0; right: 0;`，同时记录当前的滚动位置。
3. 弹窗关闭时，移除这个类，并滚动到之前的位置。
但是这种方法需要动态改变样式，而且需要计算滚动位置，可能会引起页面跳动，所以不是特别推荐。
因此，我们优先
使用方案一，并针对不同平台做调整。
然而，我们注意到引用[1]中提到，在u
-picker组件中，
uview内部可能给page添加了position:fixed，导致页面无法滚动。这说明
uview内部可能已经做了处理。但是u
-popup组件是否也有类似处理呢？根据引用[5]，用户提到
使用u
-popup时开启遮罩层禁止下层页面滚动，但并没有提到内部会设置position:fixed。
因此，我们采用方案一，并测试在H5、小程序和
App上的效果。
但是，我们还需要考虑，如果弹窗内部需要滚动怎么办？比如弹窗内容很长，需要滚动。这时，我们只禁止了页面滚动，但弹窗内部的滚动应该允许。所以，我们需要在弹窗内容区域
使用scroll
-view。
因此，完整方案如下：
步骤：
1.
使用u
-popup组件，并设置show绑定变量
popupShow。
2.
使用page
-meta动态设置页面样式：当
popupShow为true时，设置页面overflow为hidden，高度100%；否则不设置（或设置为空）。
3. 在弹窗内容区域，
使用scroll
-view组件，并设置scroll
-y和固定高度，这样弹窗内容就可以滚动。
这样，页面就不会滚动，也就不会触发onPageScroll事件。同时，弹窗内部可以滚动。
代码示例：
```html
<template>
<view>
<!
-- 动态设置页面样式，防止滚动
-->
<page
-meta :page
-style="
popupShow ? 'overflow: hidden; height: 100%;' : ''"></page
-meta>
<!
-- 页面内容
-->
<view>
<!
-- 这里可以是长页面内容
-->
</view>
<u
-popup :show="
popupShow" mode="center" @close="
popupShow = false">
<scroll
-view scroll
-y :style="'height: 600rpx;'">
<!
-- 弹窗内容，这里可以很长
-->
<view v
-for="index in 30" :key="index">内容{{index}}</view>
</scroll
-view>
</u
-popup>
<button @click="
popupShow = true">打开弹窗</button>
</view>
</template>
<script>
export default {
data() {
return {
popupShow: false
}
},
onPageScroll() {
console.log('页面滚动触发')
}
}
</script>
```
这样，当弹窗显示时，页面滚动被禁止，onPageScroll就不会触发。关闭弹窗后，页面滚动恢复。
注意：在微信小程序中，page
-meta是页面根节点，不能包含在view中，所以需要放在页面最外层（但我们在template中已经放在最外层了，只是被view包裹）。但是，根据
uniapp官方文档，page
-meta组件只能放在页面根节点，所以不能放在一个可能被隐藏的节点内。因此，我们确保page
-meta在页面中直接根节点下（即与view同级，在template下直接子级）。
但是，在微信小程序中，一个页面只能有一个page
-meta，并且放在最外层。所以上述写法是符合要求的。
如果遇到平台兼容性问题，比如在iOS上设置overflow:hidden可能无法完全阻止弹性滚动，我们可以考虑在弹窗打开时，给页面最外层view添加一个类，设置`touch
-action: none;`，但这可能不太通用。
另外，引用[5]中提到的方法二：给底层view加一个禁止滚动的事件（@touchmove.stop.prevent）只能阻止滚动，但并不能阻止已经发生的滚动事件（比如惯性滚动）触发onPageScroll。而且，这个方法会阻止整个页面的触摸滚动事件，包括弹窗内（因为事件冒泡）。所以不推荐。
因此，我们推荐
使用page
-meta方案。
最后，如果还有问题，我们可以尝试在弹窗显示时，通过一个标志位来忽略onPageScroll事件：
```javascript
onPageScroll(res) {
if (this.
popupShow) {
return; // 弹窗显示时，忽略滚动事件
}
// 正常处理
}
```
这种方法简单直接，但是onPageScroll事件依然会被触发，只是我们跳过了处理逻辑。如果我们的目的只是不执行某些逻辑，那么这种方法也可以。
综合以上，我们有两种选择：
1.
使用page
-meta禁止页面滚动，从而自然就不会触发onPageScroll（推荐，因为从根源上阻止了滚动）。
2. 在onPageScroll事件处理函数中，根据弹窗是否显示来跳过处理（适用于不能完全禁止滚动的情况，或者作为补充方案）。
我们可以结合
使用：既禁止滚动，又在事件处理中做判断。
代码示例：
在页面中：
```html
<template>
<view>
<page
-meta :page
-style="
popupShow ? 'overflow: hidden; height: 100%;' : ''"></page
-meta>
<!
-- ...其他内容...
-->
</view>
</template>
```
在页面的js中：
```javascript
onPageScroll(res) {
if (this.
popupShow) {
return; // 弹窗显示时，不处理滚动
}
// 正常处理滚动事件
}
```
这样双重保障。
总结：在
uniapp中
使用uview的u
-popup组件时，禁止页面onPageScroll事件触发的解决方案如下：
1.
使用page
-meta组件动态设置页面overflow:hidden和height:100%来禁止页面滚动。
2. 在onPageScroll事件处理函数中，判断弹窗是否显示，如果显示则跳过处理。
这样，既可以禁止页面滚动，又可以确保即使有滚动事件发生（可能在禁止之前已经触发）也不处理。
注意：如果弹窗内部有滚动，
使用scroll
-view，并设置合适的高度。
</think>在
Uniapp 中
使用 uView UI 的 u
-popup 组件时，禁止页面 `onPageScroll` 触发可以通过以下两种核心方案解决：
### 方案一：页面级滚动控制（推荐） 💯
```html
<template>
<!
-- 核心：动态控制页面滚动
-->
<page
-meta :page
-style="show
Popup ? 'overflow: hidden; height: 100%;' : ''"></page
-meta>
<view>
<u
-popup
:show="show
Popup"
@close="show
Popup = false"
:overlayStyle="{'touch
-action': 'none'}"
>
<!
-- 弹窗内容
-->
</u
-popup>
<!
-- 页面内容
-->
</view>
</template>
<script>
export default {
data() {
return {
show
Popup: false
}
},
onPageScroll(e) {
// 当弹窗显示时跳过滚动处理
if(this.show
Popup) return
// 正常的滚动处理逻辑
console.log('页面滚动', e.scrollTop)
// ...其他滚动处理代码...
}
}
</script>
```
**原理说明**：
1.
使用 `page
-meta` 动态设置 `overflow: hidden` 禁止页面滚动[^1][^5]
2. 在 `onPageScroll` 中添加条件判断，弹窗显示时跳过滚动处理
3. `touch
-action: none` 阻止遮罩层触摸事件传播[^1]
### 方案二：滚动事件拦截法
```html
<template>
<view @touchmove.stop.prevent="handleTouchMove">
<u
-popup :show="show
Popup">
<!
-- 弹窗内容
-->
</u
-popup>
<!
-- 页面内容
-->
</view>
</template>
<script>
export default {
methods: {
handleTouchMove(e) {
// 弹窗显示时阻止所有滚动事件
if(this.show
Popup) return false
}
},
onPageScroll(e) {
// 正常滚动处理（弹窗显示时不会触发）
console.log('页面滚动', e.scrollTop)
}
}
</script>
```
### 优化建议（iOS 兼容） 📱
```html
<template>
<view :class="{'ios
-fixed': show
Popup && isIOS}">
<!
-- 同上方案一或二
-->
</view>
</template>
<script>
export default {
data() {
return {
isIOS:
uni.getSystemInfoSync().platform === 'ios'
}
}
}
</script>
<style>
.ios
-fixed {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
```
### 为什么这些方案有效？
1. **物理滚动阻止**：通过 `overflow: hidden` 或 `position: fixed` 从根本上消除滚动可能性[^1][^5]
2. **事件传播拦截**：`touchmove.stop.prevent` 阻止滚动事件冒泡
3. **逻辑层过滤**：在 `onPageScroll` 中添加条件判断，双重保障
4. **平台适配**：针对 iOS 弹性滚动的特殊处理
> 对于复杂弹窗内容，建议结合
使用 `scroll
-view` 组件管理内部滚动区域，并设置 `overscroll
-behavior: contain` 属性防止滚动穿透[^1][^4]。
文章介绍了在Vue项目中，如何处理样式穿透问题，特别是针对uview的u-popup组件。当1.x版本的uview组件因使用动态样式导致无法通过常规样式穿透修改时，提供了查看源码并自定义组件属性（如bgColor）以改变背景颜色的解决方案。
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
