前言

在之前的项目中，我一直使用 Vant 组件库，其 Popup 弹出层组件运行稳定，从未出现过异常。然而，在切换到新项目使用 uView 2.0 后，遇到了一个奇怪的显示问题。

由于不确定是否为我的使用方式存在问题，本文旨在记录我遇到的问题及解决思路，希望能帮助到同样遇到此问题的小伙伴。当然，如果各位大佬有更好的见解，欢迎不吝赐教。

问题描述

在使用 uView 的 Popup 弹出层组件时，当弹出层打开后，页面底部会出现一个空白的内容块。

通过浏览器开发者工具检查 DOM 结构，发现这个空白块的类名为 u-popup，正是弹出层组件本身的 DOM 元素。

问题分析

经初步排查和 AI 辅助分析，推测该问题的根本原因是：uView 组件库在封装 Popup 组件时，未能正确处理 DOM 元素的脱离文档流，导致组件的 DOM 节点仍然占据页面文档流的空间，从而在底部产生空白区域。

解决方案

经过百度搜索，发现很少有开发者反馈类似问题，这让我不禁怀疑是否是我的使用方式存在不当之处。

最终，我采用了一个简单有效的方案：在弹出层组件外部添加一个包裹元素，通过 CSS 让该元素脱离文档流，从而避免其在页面中占据空间。

<template>
 <view class="popup-wrapper">
     <u-popup v-if="show" :show="show" mode="right" :round="16" :zIndex="10075" :overlay="true" :closeOnClickOverlay="true"
        :safeAreaInsetBottom="false" :customStyle="{ height: '100vh' }" @close="handleClose">
</u-popup>
</view>   
</template>
<style lang="less" scoped> 
.popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 10000;
    pointer-events: none;

    /deep/ .u-popup {
        pointer-events: auto;
    }
}
</style>

本文仅为问题排查的随手记录，方案可能不够优雅，但能解决当下的问题。技术之路漫漫，如有不当之处，欢迎各位前辈指教。如果这篇文章对你有所帮助，不妨点个赞支持一下，感谢！