Question

我想从下到上显示元素，就像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,
            })

Answer 1

最简单的解决方案是循环遍历reversed order r：

中的消息

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

Answer 2

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

recent_thread_conversations.reverse()

像Facebook消息一样从底部到顶部显示元素

2 个答案: