FloatingPanel

[wzx2002]

Version of antd-mobile

5.39.0

Operating system and its version

No response

Browser and its version

No response

Sandbox to reproduce

No response

What happened?

FloatingPanel 没有触发 onHeightChange事件

import {useRef} from 'react';
import {FloatingPanel, List} from 'antd-mobile';

function App() {
    const ref = useRef(null);
    const data = ['A', 'B', 'C', 'D', 'E'];

    const anchors = [
        100,
        Math.round(window.innerHeight * 0.4),
        Math.round(window.innerHeight * 0.8)
    ];

    return (
        <FloatingPanel
            ref={ref}
            anchors={anchors}
            handleDraggingOfContent={true}
            onHeightChange={(height, animating) => {
                console.log('拖拽高度:', height, '动画中:', animating);
            }}
        >
            <List>
                {data.map((item, index) => (
                    <List.Item key={index}>{item}</List.Item>
                ))}
            </List>
        </FloatingPanel>
    );
}

export default App;

Relevant log output

[dosubot]

Hi @wzx2002! I'm Dosu and I’m helping the ant-design-mobile team.

根据源码分析，FloatingPanel 的 onHeightChange 事件只有在面板高度实际发生变化时才会触发，且 handleDraggingOfContent 这个 prop 会影响拖拽事件的传递，如果内容区本身可以滚动，可能会导致拖拽事件没有正确传递到面板，进而不会触发 onHeightChange 回调（详见相关源码分析）。

你可以尝试：

1. 去掉 handleDraggingOfContent={true}，看看 onHeightChange 是否能被触发。
2. 检查 anchors 的设置，确保拖拽时高度确实发生了变化。
3. 确认 ref 没有被覆盖或失效。

如果去掉 handleDraggingOfContent 后事件能正常触发，说明是内容拖拽和面板拖拽的事件冲突导致的。此时可以考虑优化内容区的滚动行为，或者根据实际需求调整 handleDraggingOfContent 的使用。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[wzx2002]

去掉 handleDraggingOfContent 了还是一样

[dosubot]

onHeightChange 事件只有在 FloatingPanel 高度实际发生变化时才会触发。如果拖拽面板没有在 anchors 之间移动，或者 anchors 设置有问题（比如值重复或 window.innerHeight 获取异常），事件不会触发。建议：

1. 检查 anchors 数组，确保每个值都不同且在当前页面高度范围内。
2. 尝试用 ref 手动调用面板的移动方法（比如切换到不同 anchor），看 onHeightChange 是否能触发。
3. 检查是否有外部 CSS（如 overflow、position）影响了面板的拖拽或渲染。
4. 确认 FloatingPanel 正常挂载，且没有被父组件条件渲染或卸载。

如果这些都没问题，建议简化 demo 只保留 FloatingPanel 和 anchors，排查是否是其他代码或样式影响了事件触发。
相关源码分析可参考：onHeightChange 事件触发机制。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[wzx2002]

需要我自己找panel，然后绑定touchmove事件才能获取，希望可以优化一版兼容性强一点的

[github-actions]

Hi, wzx2002.

Please provide a online reproduction so that we can help you troubleshoot the problem. You can create a demo by codesandbox or stackblitz.

我们需要你提供一个在线的重现实例，以便于我们帮你排查问题。你可以通过 codesandbox 或 stackblitz 创建一个实例。

[zhuojun1024]

我也遇到了一样的问题，而且就是用的官方文档给的例子里的代码测试的，版本5.41.1