uni-popup被遮挡问题、root-portal组件的使用、croll-view内的元素被遮挡

### 如何使用 `uni-popup` 组件遮挡小程序的 TabBar 在 UniApp 开发中，如果希望 `uni-popup` 或类似的弹出层能够完全遮挡住小程序自带的 TabBar，则需要注意以下几个关键点： #### 1. **TabBar 的特性** UniApp 小程序中的 TabBar 是由微信小程序底层渲染的原生控件，默认情况下它不会被普通的 HTML 元素所遮盖。因此，在设计弹出层时需要特别处理以确保其能覆盖到 TabBar 区域[^3]。 #### 2. **设置安全区适配参数** 为了使 `uni-popup` 能够延伸至屏幕底部并覆盖住 TabBar，可以启用 `safe-area-inset-bottom` 参数。此参数允许组件自动调整位置以适应带有圆角或刘海屏的设计，并扩展到底部边缘[^1]。 ```html <uni-popup ref="popup" type="bottom" :safe-area-inset-bottom="true"> <!-- 弹出层内容 --> </uni-popup> ``` #### 3. **利用 `root-portal` 提升层级** 对于某些特定场景（尤其是 iOS 平台上的微信小程序），即使启用了上述配置仍可能出现弹出层被固定定位元素遮挡的情况。此时可以通过引入 `root-portal` 来解决这一问题。`root-portal` 可将以一种独立的方式重新挂载 DOM 结构，从而避免与其他视图发生重叠冲突[^2]。 以下是结合 `root-portal` 使用的例子： ```html <root-portal> <uni-popup ref="popup" type="bottom" :mask="true" border-radius="18" :safe-area-inset-bottom="true"> <view class="popup_content">...</view> </uni-popup> </root-portal> ``` 通过以上方式，不仅可以有效提升弹窗的实际显示优先级，还能更好地兼容不同设备间的差异表现。 --- ### 总结 要让 `uni-popup` 成功遮蔽掉小程序内的 TabBar，需综合考虑以下几点措施：一是开启 `safe-area-inset-bottom` 属性来保障布局范围触及屏幕最底端；二是针对特殊环境下的异常状况采用 `root-portal` 技术手段加以优化改进。如此一来即可达成预期效果[^2]。 ```javascript // 示例 JavaScript 控制逻辑 methods: { openPopup() { this.$refs.popup.open(); } } ```