TDesign-MiniProgram 中 t-popup 组件在左侧布局下的高度问题解析

TDesign-MiniProgram 中 t-popup 组件在左侧布局下的高度问题解析

tdesign-miniprogram A Wechat MiniProgram UI components lib for TDesign. 项目地址: https://gitcode.com/gh_mirrors/tde/tdesign-miniprogram

问题背景

在 TDesign-MiniProgram 1.8.8 版本中，开发人员发现当使用 t-popup 组件并设置 placement="left" 和 usingCustomNavbar 属性时，组件的高度计算存在异常。具体表现为虽然设置了正确的 top 值，但 popup 的整体高度仍然保持 100vh，这可能导致内容溢出屏幕。

技术细节分析

预期行为

在理想情况下，当使用 usingCustomNavbar 属性时，t-popup 组件应当：

1. 自动计算并减去自定义导航栏的高度
2. 调整 popup 容器的 top 位置
3. 同时相应调整容器的高度，确保内容不会超出可视区域

实际表现

在 left 布局模式下，组件仅调整了 top 位置，但未同步调整高度，导致：

• 容器顶部位置正确下移
• 容器高度仍保持 100vh
• 底部内容可能被截断或溢出屏幕

解决方案

TDesign 团队在 1.9.0-beta.3 版本中修复了此问题。修复方案可能包括：

1. 对 left/right 布局模式进行特殊处理
2. 在计算样式时同时考虑高度调整
3. 确保自定义导航栏高度被正确应用于所有布局模式

最佳实践建议

开发人员在使用 t-popup 组件时应注意：

1. 对于侧边弹出布局，建议明确指定高度而非依赖 100vh
2. 使用 scroll-view 等可滚动容器时，应确保其高度计算正确
3. 及时更新到最新稳定版本以获取最佳兼容性

总结

这个问题的修复体现了 TDesign-MiniProgram 团队对组件细节的持续优化。对于小程序开发中常见的布局适配问题，开发者应当注意不同布局模式下的特殊处理需求，特别是在使用自定义导航栏等高级特性时。

tdesign-miniprogram A Wechat MiniProgram UI components lib for TDesign. 项目地址: https://gitcode.com/gh_mirrors/tde/tdesign-miniprogram