Javascript 聊天应用自下而上的布局设计

我正在为聊天应用程序设计一个webapp。我有一个API，它返回消息列表：

chatsite.com/api/thread/1/messages/

[
    {
        "id": 2,
        "sender": {
            "id": 2,
            "email": "usertwo@gmail.com"
        },
        "sent_datetime": "2017-09-06T17:31:30Z",
        "body": "user two sending a message in new thread (pk1)"
    },
    {
        "id": 1,
        "sender": {
            "id": 1,
            "email": "user@gmail.com"
        },
        "sent_datetime": "2017-09-06T17:28:56Z",
        "body": "Nwe thread est body"
    }
]

以下是html目前的布局方式：

<div id="Thread">
    <div id="Header"></div>
    <div id="MessageList">
        <div class="message">
            <p>{{message.body}}</p>
        </div>
        <div class="message">
            <p>{{message.body}}</p>
        </div>
        <div class="message">
            <p>{{message.body}}</p>
        </div>
    </div>
    <div id="Footer"></div>
</div>

到目前为止，所有消息都是以从上到下的方式按最新消息排序的。最新版本位于顶部，依此类推：

__________________
|                |
|     HEADER     |
|________________|
|                |
| Latest msg     |
|________________|
|                |
| 2nd latest msg |
|________________|
|                |
|                |
|                |
|                |
|________________|
|                |
|     FOOTER     |
|________________|

但我希望像现在所有的消息平台一样，从下到上地获取消息。最新消息在底部，以此类推：

__________________
|                |
|     HEADER     |
|________________|
|                |
|                |
|                |
|                |
|________________|
|                |
| 2nd latest msg |
|________________|
|                |
| Latest msg     |
|________________|
|                |
|     FOOTER     |
|________________|

如果有帮助，我将使用Vuejs作为前端框架。

只需更改：

#MessageList {
    flex-direction: column;
}

到

#线程{
背景色：中绿色；
显示器：flex；
弯曲方向：立柱；
溢出y：隐藏；
高度：100vh；
}
#标题{
高度：25px；
背景色：蓝紫色；
}
#消息列表{
背景颜色：深蓝；
身高：100%；
显示器：flex；
弯曲方向：柱反向；
溢出y：自动；
}
.留言{
背景色：白色；
填充：4px；
边框：1px实心#f9f9f9；
字号：1rem；
保证金：4倍；
}
#页脚{
高度：100px；
背景：红色；
}

最近的

老的

老的

您可以反转流程，也可以使用滚动条将最后一条消息保留在容器底部。CSS使用：

flex方向：列反转；变换：比例（1，-1）

由于一个bug，
flex-direction:column
+
flex:1
+
溢出：auto
不工作，我添加了一个额外的包装器，以获得一个高效的滚动条，以便在需要时滚动到旧邮件。最后显示在底部，与页脚相对

范例


//演示目的是假装新消息即将出现。。不，从名单上往下看；）
$（文档）.ready（函数（）{
setInterval（函数（）{
$（“#缓冲区”）。追加（“添加到列表中的最新消息。
“+Date（）+”
”）；
}, 2000);
});
#线程{
背景色：中绿色；
显示器：flex；
弯曲方向：立柱；
溢出y：隐藏；
高度：600px；
最大高度：100vh；/*增加可选高度*/
}
#页眉，#页脚{
背景色：蓝紫色；
线高：2米；
颜色：白色；；
}
#消息列表{
背景颜色：深蓝；
弹性：1；/*增加*/
变换：缩放（1，-1）；/*添加了镜像框和滚动条*/
溢出：自动；/*已添加*/
}
#缓冲区{
显示：flex；/*已添加*/
弹性流动：柱反向；/*已添加*/
计数器重置：msg/*已添加*/
}
.留言：之前{
内容：“消息N°”计数器（msg）；/*已添加*/
颜色：紫色；
}
.信息：第n个孩子（奇数）：之前{
颜色：青柠
}
.留言{
计数器增量：msg；/*已添加*/
背景色：白色；
填充：8px；
边框：1px实心#f9f9f9；
字体大小：20px；
保证金：4倍；
transform:scale（1，-1）/*添加使消息再次可读*/
}
#页脚{
背景：红色；
}
正文{margin:0；}

任何高度的收割台
{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

{{message.body}

页脚任意高度

setInterval（函数（）{
var main=document.querySelector（'main'）；
var div=document.createElement（'div'）；
div.textContent=Date（）；
主分区（分区）；
main.scrollTop=main.scrollHeight；//是的，它更大，但浏览器可以处理这个问题
}, 1000);
html，正文{
身高：100%；
保证金：0；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
主要{
flex:1自动；
溢出：自动；
背景：古色白；
显示器：flex；
弯曲方向：立柱；
}
main：：之前{
内容：“；
flex:100px；
}
标题
页脚
您能从API中排序结果吗？您不能简单地使用
弹性方向：列反转
？：）很酷，但是如果你用鼠标滚轮滚动它，它会朝相反的方向滚动：）@Qwertiy是的，它会朝相反的方向滚动，需要10秒的时间，当大多数人都没有注意到它时，这对我来说不是问题；）
#MessageList {
    flex-direction: column;
}

#MessageList {
    flex-direction: column-reverse; /* this */
}