TDesign Mobile组件库实战经验与性能优化探索

又踩坑了，TDesign Mobile 的 Popup 居然不听话

最近在用 TDesign Mobile 做一个移动端项目，需求是实现一个从底部弹出的筛选面板。原以为是个简单的需求，直接用 TDesign 提供的 Popup 组件就能搞定，结果却遇到了一堆问题，折腾了大半天。

核心问题是：Popup 弹出时，页面滚动被阻止了，导致用户无法正常浏览页面内容。而且在某些安卓机型上，弹层关闭后页面会突然跳动一下，体验很差。

先说解决方案吧

最后我发现，通过配置 preventScrollThrough 和手动处理滚动锁定逻辑可以解决大部分问题。下面是完整的代码：

import { Popup } from 'tdesign-mobile-react';
import React, { useState } from 'react';

function FilterPanel() {
  const [visible, setVisible] = useState(false);

  const handleOpen = () => {
    setVisible(true);
    document.body.style.overflow = 'hidden'; // 禁止页面滚动
  };

  const handleClose = () => {
    setVisible(false);
    document.body.style.overflow = ''; // 恢复页面滚动
  };

  return (
    <div>
      <button onClick={handleOpen}>打开筛选面板</button>
      <Popup 
        visible={visible} 
        placement="bottom" 
        onClose={handleClose}
        preventScrollThrough={false} // 关键配置
      >
        <div style={{ padding: '20px', background: '#fff' }}>
          <p>这里是筛选条件</p>
          <button onClick={handleClose}>关闭</button>
        </div>
      </Popup>
    </div>
  );
}

export default FilterPanel;

这里我踩了个坑：preventScrollThrough 默认值是 true，如果你不显式地设置为 false，那么即使你手动控制 document.body.style.overflow，滚动行为还是会被干扰。

为什么会遇到这个问题？

事情是这样的。刚开始我直接用了官方文档的示例代码，结果发现弹出 Popup 后，页面滚动被禁用了，这本来没什么问题，但当我在安卓设备上测试时，发现关闭弹层后页面会出现“闪跳”现象。

具体表现为：关闭弹层后，页面滚动条会瞬间回到顶部，或者页面布局会有轻微抖动。这个问题在低端安卓机上尤其明显。

我一开始怀疑是 CSS 样式的问题，比如 position: fixed 或者 overflow: hidden 导致的。后来试了下去掉这些样式，问题依然存在。

折腾了半天发现，原来是 TDesign 的 Popup 组件内部默认实现了滚动锁定逻辑，而这个逻辑和我的业务代码产生了冲突。换句话说，组件内部已经对滚动做了处理，而我又在外面加了一层滚动锁定，结果就乱套了。

排查过程和那些浪费时间的尝试

排查过程中我试了好几种方法，这里列一下，给大家避个坑：

• 方法一：只用组件自带的滚动锁定功能。结果发现，虽然页面滚动确实被阻止了，但在某些安卓机型上，关闭弹层后页面会出现“闪跳”现象。
• 方法二：完全禁用组件的滚动锁定（preventScrollThrough={false}），然后自己在外面用 JavaScript 控制滚动。结果发现，如果用户快速连续点击按钮，可能会出现滚动状态混乱的情况。
• 方法三：结合两者，既设置 preventScrollThrough={false}，又在外面手动控制 document.body.style.overflow。最终这个方案效果最好，虽然还有一点小瑕疵，但基本能接受。

这里提醒大家：不要轻易相信第三方组件的默认行为，尤其是涉及到滚动、弹层这种复杂交互的功能，一定要多测试几个场景。

技术细节补充

TDesign Mobile 的 Popup 组件内部其实用了一个叫 LockScroll 的工具类来处理滚动锁定。这个工具类的核心逻辑是：

• 监听 touchmove 事件，阻止默认行为。
• 动态添加和移除 overflow: hidden 样式。

但由于不同设备和浏览器对滚动行为的处理方式不同，特别是在安卓 WebView 中，很容易出现各种奇怪的问题。所以如果你直接依赖组件的默认行为，可能会踩到一些意想不到的坑。

另外，手动控制滚动锁定时需要注意以下几点：

• 确保在弹层关闭时及时恢复滚动状态，否则页面会一直处于不可滚动的状态。
• 避免重复设置 document.body.style.overflow，否则可能会导致性能问题。
• 考虑极端情况，比如用户快速连续点击按钮，弹层频繁打开关闭时的状态管理。

还有一些小问题没解决

虽然上面的方案已经能解决大部分问题了，但还是有一些小瑕疵：

• 在某些低端安卓设备上，关闭弹层后页面还是会轻微抖动一下，不过不影响功能。
• 如果页面本身有复杂的滚动逻辑（比如嵌套滚动），需要额外处理，不然可能会冲突。

这些问题暂时没精力去深究了，毕竟项目工期有限，能做到目前这个程度已经差不多了。

以上是我踩坑后的总结

总的来说，TDesign Mobile 的 Popup 组件功能还是很强大的，但在实际使用中还是要小心它的默认行为，尤其是在滚动锁定这块。

如果你有更好的方案，或者对滚动锁定有更深的研究，欢迎评论区交流。后续我还会继续分享一些关于 TDesign 的实战经验，敬请期待！