从下到上显示元素，如 facebook 消息

Posted 2023-02-24

【中文标题】从下到上显示元素，如 facebook 消息

【英文标题】：display elements from bottom to top like facebook messages

【发布时间】：2015-03-07 10:29:03

【问题描述】：

我想从下到上显示元素，例如 facebook 消息是如何从下到上显示的。我该怎么做？

html:

<div id="message_wrapper">
    <div class="message">
        <p>1 Message message message....</p>
    </div>
    <div class="message">
        <p>2 Message message message....</p>
    </div>
    <div class="message">
        <p>3 Message message message....</p>
    </div>
    <div class="message">
        <p>4 Message message message....</p>
    </div>
</div>

所以我希望它显示：

4 Message message message....
3 Message message message....
2 Message message message....
1 Message message message....

更新：添加了 django tempate

这是coveration.html的模板：

<div id="messages_wrapper">

<!-- if there are conversation in the recent thread, then show the conversation -->
% if conversations != 0 %
<p><b>You have conversations:</b></p>

    <!-- check the messagestate of each message of the recent_tread, if all the messages of the thread are not hidden then show the messages -->
    % if recent_thread|all_message_hidden:user %
        <p>All messages are hidden</p>

    % else %


        % for conversation in conversations %

            % if conversation|conversation_hidden:user %

                % if conversation.sender == user %
                    <div id="conversation" class="user_sent_conversation">
                        <p>conversation.id-conversation.body : Sender- conversation.sender, ID conversation.sender.id</p>
                        <p>Already hidden</p>
                    </div>
                    <hr/>
                % else %
                    <div id="conversation" class="others_sent_conversation">
                        <p>conversation.id-conversation.body : Sender- conversation.sender, ID conversation.sender.id</p>
                        <p>Already hidden</p>
                    </div>
                    <hr/>
                % endif %

            % else %
                % if conversation.sender == user %
                    <div id="conversation" class="user_sent_conversation">
                        <p>conversation.id-conversation.body : Sender- conversation.sender, ID conversation.sender.id</p>
                        <a href="/inbox/delete_conversation/conversation.id/">[X]</a>
                    </div>
                    <hr/>
                % else %
                    <div id="conversation" class="others_sent_conversation">
                        <p>conversation.id-conversation.body : Sender- conversation.sender, ID conversation.sender.id</p>
                        <a href="/inbox/delete_conversation/conversation.id/">[X]</a>
                    </div>
                    <hr/>
                % endif %

            % endif %

        % endfor %


        <div id="message_form_wrapper_inside">
            % if messages %
            <ul class="messages">
                % for message in messages %
                <li% if message.tags % class=" message.tags "% endif %> message </li>
                % endfor %
            </ul>
            % endif %

            <form action="/inbox/send_messages/recent_thread|get_user_id:user/" method="post">
                % csrf_token %
                <label for="recipient">To - recent_thread|get_user_id:user</label>

                <label for="subject">
                    Subject - 
                    % if recent_thread.subject != '' %
                        recent_thread.subject 
                    % else %
                        No subject
                    % endif %
                </label>

                <label for="body">Message</label>
                <textarea name="body" id="body" value=""></textarea>

                <input type="submit" value="Send">
            </form>
        </div>


    % endif %

% else %

    <p>No message for this thread</p>

% endif %

</div>

更新：添加了 views.py

用于显示消息的视图。

@login_required(login_url='/accounts/required_login/')
def message(request):
    user = request.user

    # Get all the threads of that user
    threads = user.thread_set.all()

    # Order the threads by which thread recieved the latest message
    order_threads_message = threads.annotate(max_sent_date=Max('message__sent_date')).order_by('-max_sent_date')

    if order_threads_message.count() > 0:
        # Get the recent thread
        recent_thread = order_threads_message[0]

        if recent_thread.message_set.all().count() > 0:

            # Get the conversations of the recent thread
            recent_thread_conversations = recent_thread.message_set.all()

            return render(request, 'conversations.html', 
                'recent_thread':recent_thread,
                'all_threads':order_threads_message,
                'conversations':recent_thread_conversations,
                'active': recent_thread.id
                )
        else:
            recent_thread_conversations = 0

            return render(request, 'conversations.html', 
                'recent_thread':recent_thread,
                'all_threads':order_threads_message,
                'conversations':recent_thread_conversations,
                'active': recent_thread.id
                )

    else:
        order_threads_message = 0

        recent_thread_conversations = 0

        return render(request, 'conversations.html', 
            'all_threads':order_threads_message,
            'conversations':recent_thread_conversations,
            )

【问题讨论】：

您在哪里以及如何获得这些信息？请向我们展示视图和/或模型代码。

@alecxe 添加了模板。请看一看。

@catavaran 添加了视图和模板。请看一看。

【参考方案1】：

最简单的解决方案是循环遍历reversed orderr 中的消息：

% for conversation in conversations reversed %
    ...
% endfor %

【讨论】：

效果很好！就像我想要的那样。谢谢。

这和reverse() 不一样，你显然不想要？

【参考方案2】：

为了让它“自下而上”显示，请在 QuerySet 上使用 #reverse() 方法。 这是假设线程按降序排序，即最新消息在前。

recent_thread_conversations.reverse()

【讨论】：

我不希望它从最后一个（向后）对象开始显示，我只希望第一个对象在底部然后向上。