Blazor虚拟组件的上下翻转列表

Question

我正在开发一个聊天应用程序 我正在使用虚拟化方法，已经尝试了几天如何使这个列表从底部渲染到顶部 由于在网上找不到任何解决方案，所以我决定在这里提问

以下是我的代码：

  <Virtualize Context="message" ItemsProvider="@ItemsProvider" @key="user.FrontId"  >

                                    @{
                            
                                         string classes = "";
                                         if (message.ToUserId == User.UserId)
                                         {
                                             classes = classes + " user";
                                         }
                                     }
                                    

                                     <div id="@message.Id" class="single-msg @classes">
                                         @if (classes == "")
                                         {
                                             <div class="triangle-topleft single-msg-shap">
                                             </div>
                                         }

                                         <div class="single-msg-content">
                                             <div class="msg-detail" style="padding: 20px; padding-top: 0px;">
                                                 <span> @message.Message </span>
                                             </div>
                                             <div class="msg-action">
                                                 <span> @message.ShortCreateAt </span>
                                             </div>
                                         </div>
                                     </div>



                                 </Virtualize>

这是它的渲染方式： 我找不到任何解决这个问题的方法，也不想使用JavaScript。因为在使用Blazor时使用JavaScript是不合适的，不符合逻辑。

- Mamadmti

---

CSS的弹性盒子（flexboxes）允许您更改元素的显示顺序。也许可以尝试一下这个功能。在Blazor中出现的显示问题很少与Blazor本身有关，几乎总是与CSS相关的问题。您可以参考https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction了解更多关于flex-direction属性的信息。 - Bennyboy1973

@Bennyboy1973，我按照你说的做了，它起作用了，这修复了方向。谢谢你，但是不幸的是，虚拟化组件仍然从列表的末尾渲染（例如从记录100到0）。 - Mamadmti

Virtualize的渲染顺序是基于ItemsProviderResult中由@ItemsProvider提供的IEnumerable的顺序。你没有展示那段代码。如果你改变那里的排序，就会改变Virtualize中的排序。 - MrC aka Shaun Curtis

我不会默认使用虚拟化。大多数文本交流最多只有几十行，这只是一小部分数据，完全可以一次性下载下来。 - Bennyboy1973

Answer 1

感谢@Bennyboy1973的帮助， 我通过在我的项目中复制和修改虚拟化组件来解决了这个问题 现在它正常工作了

像这样修改虚拟化克隆类：

 protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeVoidAsync("scrollToBottom");
    }

并在内部添加如下脚本：

function scrollToBottom() {
var objDiv = document.getElementById("user-chat-content");
objDiv.scrollTop = objDiv.scrollHeight;
}

最终结果在加载时显示（最近的聊天记录）：

- Mamadmti