从下到上显示聊天消息

Posted 2023-02-21

【中文标题】从下到上显示聊天消息

【英文标题】：Display chat messages from bottom to top

【发布时间】：2021-09-27 07:39:45

【问题描述】：

我正在开发一个虚拟化消息的聊天。它可以作为普通列表使用。

现在我正在尝试“样式化”自下而上的消息（例如 Whatsapp、Telegram 和每个消息应用程序都可以使用）。

我在父级上添加了display: flex、flex-direction: column、justify-content: flex-end，如下面的代码所示。

编辑：我还在消息中添加了display: flex、flex-direction: column-reverse，因此它们的顺序已经正确。问题是他们在聊天中的位置，与底部的输入有关。

我还在带有 flexbox 和 AutoSizer 的父级之间放置了一个 div，因为它是 React 虚拟化文档所必需的。

<div style= position: 'relative', minHeight: '100%', display: 'flex', justifyContent: 'flex-end', flexDirection: 'column'  >
            <div style= flex: '1 1 auto' >
                <AutoSizer onResize=scrollToBottom>
                    ( width, height ) => (
                        <List
                            ref=ListRef
                            deferredMeasurementCache=_cache.current
                            width=width
                            height=height
                            overscanRowCount=props.overscanRowCount
                            noRowsRenderer=_noRowsRenderer
                            rowCount=xRowCount
                            rowHeight=_cache.current.rowHeight
                            rowRenderer=_rowRenderer
                            scrollToIndex=xRowCount
                        />
                    )
                </AutoSizer>
            </div>
        </div>

如 React 虚拟化文档中所述：

关于将 AutoSizer 与 flexbox 容器一起使用的注意事项。 Flex 容器不会阻止他们的孩子成长，而 AutoSizer 会贪婪地成长以尽可能多地填充空间。将两者结合起来可能会导致循环。解决此问题的简单方法是将 AutoSizer 嵌套在块元素（如 a ）中，而不是将其作为 flex 容器的直接子元素。

问题是：没有应用 flex-end 样式。该列表从上到下都像以前一样工作。

有没有其他方法可以做到这一点？如果是这样，我愿意这样做。如果是这样的话，有谁知道问题出在哪里？

编辑：我为这个问题创建了一个演示：https://codesandbox.io/s/flexendreactvirtualize-hospg

【问题讨论】：

人只使用排序）

这不是关于顺序，而是关于页面上消息的位置。它们的顺序已经正确。

但是有什么问题？只需使用按日期排序，并在 div 末尾显示最新的

如果是css问题就用justify-content: flex-end; jsfiddle.net/34yrpfkj

是的，这就是我正在使用的。问题是我正在使用 react-virtualized 来“按需”计算元素的高度。所以 justify-content: flex-end 不起作用，我不知道为什么。

【参考方案1】：

React 虚拟化位置项绝对，style 传入rowRenderer 参数。不建议用 css 覆盖它。

建议，而不是尝试使用 css 解决顺序（如果您需要更改样式，请覆盖提供的 style 对象），这是我的建议：

使用rowRenderer 的index 属性显示正确的项目。

例子：

const _rowRenderer = (index, ...delegate) => 
   // instead of `myItems[index]` to invert order
   const item = myItems[myItems.length - 1 - index]
   return <ItemDisplay item=item ...delegate />

类似的东西？

【讨论】：

否，因为消息的顺序已经正确。最新的在底部，最旧的在顶部。我只想将它们“附加”到您键入消息的输入。由于反应虚拟化，常规 CSS 无法正常工作。

我创建了一个演示 @Pandaiolo codesandbox.io/s/flexendreactvirtualize-hospg

对...这是一个不同的问题，不知道如何处理它，可能有两件事在列表挂载/新消息中产生影响：1.如果虚拟网格的高度小于容器，添加样式以与底部 2 对齐。否则，像 listRef.scrollTo(0, listRef.scrollHeight) 这样它会到底部？ （在这种情况下，您需要跟踪手动用户滚动以暂停自动滚动）