使用引导程序 4 在没有 javascript 的聊天框中的消息顺序

Posted 2023-02-24

【中文标题】使用引导程序 4 在没有 javascript 的聊天框中的消息顺序

【英文标题】：Message order in a chat box without javascript using bootstrap 4

【发布时间】：2019-05-19 08:09:45

【问题描述】：

我想知道是否有办法调整我的聊天框，以便消息从底部出现，就像任何聊天应用程序一样。我正在使用 Django 和 bootstrap 4，这是我的代码：

                            <div class="list-group flex-column-reverse " id="Chatting" style="transform: rotate(-180deg);">

% for message in object.messages.all %

    <a class="list-group-item list-group-item-action border-white "  % if message.user == user  % style="background-color: rgba(190,229,235,0.1);"% endif %>
        <div class="row text-lowercase" style="height: 15px;">
        <div class="col text-left">
            <p style="font-size: 10px;"> message.user.first_name   message.user.last_name|slice:":1" </p>
        </div>
        <div class="col">
            <p class="text-right" style="font-size: 10px;"> message.date|date:"SHORT_DATETIME_FORMAT" </p>
        </div>
        </div><span>

         message.text|linebreaks 
        % if message.attachment %
            <img src=" message.attachment.url "   ></img>
        % endif %
    </span>
    </a>


% endfor %

name 的 id 列表已经溢出：auto 就可以了。 如果我使用没有rotation 部分且没有flex-column-reverse 的代码，则消息列表从框的顶部开始，这是违反直觉的。如果我只使用 flex-column-reverse 我得到了正确的排序但是当页面加载它加载最旧的消息并且用户必须向下滚动时，这也意味着每次他写一条消息时他都必须再次向下滚动。我正在使用的 hack 通过显示正确的顺序并在最后一条消息处加载页面来工作，但是滚动条位于聊天框的左侧，并且与鼠标滚动相反。 我添加了结尾截图。有没有不使用javascript的解决方案？我对javascript的理解真的很糟糕：÷

【参考方案1】：

我会在视图而不是模板中这样做。我的建议是（假设您使用基于类的视图，我会重载 get_context_data 方法以添加按我想要的方式排序的消息：

def get_context_data(self, **kwargs):
    context = super(). get_context_data(**kwargs)
    # Now we add messages sorted in ascending order by date
    # I'm assuming you are using some kind of DetailView or similar
    # which has an 'object' field
    context['messages'] = self.object.messages.order_by('date')

    return context

然后在您的模板中，您必须直接迭代 messages 变量而不是 object.messages.all。

更重要的是，如果您通常希望消息按该顺序排列，我会将其添加到您的 Message 模型的 Meta 类 ordering 属性中，如下所示：

class Message(Model):
    # whatever is your model

    class Meta:
        ordering = ['date']

根据您的最后一条评论，我建议您只需以相反的顺序迭代列表 (take a look to this part of the documentation)。总结一下你应该：

% for message in obj.messages.all reversed %
    <!-- Do whatever you want to render your messages --!>
% endfor %

为了保持向下滚动，您需要一些 JS 或 CSS 技巧。我想您可能会发现this question 很有用。

【讨论】：

老实说，我使用了 django-conversation 包，并尝试对其进行更新以供我使用，但我发现理解他们的代码很复杂，这就是为什么我试图在模板。我不想弄乱包裹并有惊喜。

您是在覆盖包的模板还是在使用自己的视图？

我正在覆盖包的模板。视图未受影响。

您上次的编辑很好，使用 reversed 几乎与 css 中的 column-reverse 相同，我将尝试查看您的问题链接。我以前见过它，但它太复杂了。但显然没有只使用 css 的解决方案。