uniapp中使用组件uni-popup

Question

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

Answer 1

在 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 组件内的滚动事件只会被容器组件捕获，底层区域不会接收到手指事件，也就不会出现页面穿透的问题了。