diff --git a/client/shared/redux/hooks/useConverseMessage.ts b/client/shared/redux/hooks/useConverseMessage.ts index 0257e455..87cafe33 100644 --- a/client/shared/redux/hooks/useConverseMessage.ts +++ b/client/shared/redux/hooks/useConverseMessage.ts @@ -17,6 +17,7 @@ import { t, useAsyncRequest, useChatBoxContext, + useMemoizedFn, } from '../..'; import { MessageHelper } from '../../utils/message-helper'; import { ChatConverseType } from '../../model/converse'; @@ -154,7 +155,7 @@ export function useConverseMessage(context: ConverseContext) { }, [converseId, reconnectNum, currentUserId]); // 加载更多消息 - const [{ loading: isLoadingMore }, handleFetchMoreMessage] = + const [{ loading: isLoadingMore }, _handleFetchMoreMessage] = useAsyncRequest(async () => { const firstMessageId = _get(messages, [0, '_id']); if (!isValidStr(firstMessageId)) { @@ -177,6 +178,18 @@ export function useConverseMessage(context: ConverseContext) { ); }, [converseId, hasMoreMessage, _get(messages, [0, '_id'])]); + /** + * 加载更多 + * 同一时间只能请求一次 + */ + const handleFetchMoreMessage = useMemoizedFn(async () => { + if (isLoadingMore) { + return; + } + + await _handleFetchMoreMessage(); + }); + const handleSendMessage = useHandleSendMessage(context); return { diff --git a/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx b/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx index 18c5ec52..3a525ff9 100644 --- a/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx +++ b/client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx @@ -4,6 +4,12 @@ import { ChatMessageHeader } from './ChatMessageHeader'; import { buildMessageItemRow } from './Item'; import type { MessageListProps } from './types'; +/** + * 距离顶部触发加载更多的 buffer + * 并处理在某些场景下计算位置会少1px导致无法正确触发加载的问题 + */ +const topTriggerBuffer = 100; + /** * 没有虚拟化版本的聊天列表 */ @@ -42,8 +48,8 @@ export const NormalMessageList: React.FC = React.memo( // 滚动到最底部 lockRef.current = false; } else if ( - -containerRef.current.scrollTop + containerRef.current.clientHeight === - containerRef.current.scrollHeight + -containerRef.current.scrollTop + containerRef.current.clientHeight >= + containerRef.current.scrollHeight - topTriggerBuffer ) { // 滚动条碰触到最顶部 props.onLoadMore();