Skip to content

Commit

Permalink
fix: 修复在某些场景下计算高度会少1px导致无法
Browse files Browse the repository at this point in the history
  • Loading branch information
moonrailgun committed Dec 30, 2022
1 parent 504060e commit 7644924
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 3 deletions.
15 changes: 14 additions & 1 deletion client/shared/redux/hooks/useConverseMessage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
t,
useAsyncRequest,
useChatBoxContext,
useMemoizedFn,
} from '../..';
import { MessageHelper } from '../../utils/message-helper';
import { ChatConverseType } from '../../model/converse';
Expand Down Expand Up @@ -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)) {
Expand All @@ -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 {
Expand Down
10 changes: 8 additions & 2 deletions client/web/src/components/ChatBox/ChatMessageList/NormalList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@ import { ChatMessageHeader } from './ChatMessageHeader';
import { buildMessageItemRow } from './Item';
import type { MessageListProps } from './types';

/**
* 距离顶部触发加载更多的 buffer
* 并处理在某些场景下计算位置会少1px导致无法正确触发加载的问题
*/
const topTriggerBuffer = 100;

/**
* 没有虚拟化版本的聊天列表
*/
Expand Down Expand Up @@ -42,8 +48,8 @@ export const NormalMessageList: React.FC<MessageListProps> = 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();
Expand Down

0 comments on commit 7644924

Please sign in to comment.