uniapp中使用组件uni-popup

uniapp中使用组件uni-popup的时候在弹窗上滚动但穿透到页面了该怎么有效解决 急

在 uni-popup 这个组件中，默认情况下，背景区域是没有滚动的，当弹窗出现时，我们手指滑动的事件也会同时被背景区域所接收，导致页面穿透问题。

为了解决这个问题，我们需要做两件事情：

阻止底层区域的滚动
可以使用 catchtouchmove 事件来阻止底层的区域滚动。在弹出层的容器组件上添加这个事件，并且调用 preventDefault 方法来禁用滚动。示例如下：

<view class="popup-wrapper" catchtouchmove="preventPageScroll">
    <!-- 组件的内容 -->
</view>
methods: {
    preventPageScroll(event) {
        event.preventDefault();
    }
}

这样，在弹出层展示时，底层区域就不能滚动了，手指的滑动事件被示例的组件吸收，就不会有页面穿透问题了。

弹出层的自身滚动
如果有需要在弹窗组件内自身滚动，可以考虑使用 scroll-view 组件，更好地支持内部区域的滚动。将需要滚动的内容放在 scroll-view 组件中，并且根据内容的实际高度设置 scroll-view 组件的高度即可。示例如下：

<view class="popup-wrapper" catchtouchmove="preventPageScroll">
    <scroll-view scroll-y style="height: 90%;">
        <!-- 组件的内容 -->
    </scroll-view>
</view>
.popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.55);
    z-index: 9999;
}
methods: {
    // ...
}

这种方式下，scroll-view 组件内的滚动事件只会被容器组件捕获，底层区域不会接收到手指事件，也就不会出现页面穿透的问题了。

该回答引用GPT:
对于这个问题，解决方法很简单，我们只需要在弹窗打开时禁止底层页面滚动即可。具体实现方法如下：

在弹出组件的事件中，调用uni-page-scroll-lock插件的preventScroll方法，用于禁止底层页面的滚动（如果没有引入该插件，需要先安装并引入）：

import {preventScroll} from 'uni-page-scroll-lock';
export default {
  data() {
    return {
      showPopup: false
    };
  },
  methods: {
    openPopup() {
      this.showPopup = true;
      preventScroll(true); // 禁止底层页面滚动
    },
    closePopup() {
      this.showPopup = false;
      preventScroll(false); // 恢复底层页面滚动
    }
  }
}

当弹窗关闭时，需要调用preventScroll方法恢复底层页面的滚动。

除了使用uni-page-scroll-lock插件之外，我们还可以使用css样式进行控制。在弹出层的样式中，为弹窗容器设置position:fixed和overflow:auto样式，同时设置z-index样式防止被覆盖：

.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  z-index: 1001;
}

以上两种方法都可以有效地解决弹窗滚动穿透问题。
如还有疑问，可留言帮助解决。