响应式视图，如使用Boostrap 4和Ember的Whatsapp网络

Question

我正在尝试实现像UI这样的Whatsapp web。 我正在使用 Bootstrap 4 和 Ember 3.2。 基本想法现在正在起作用。我已经完成了视图底部的消息框(使用固定底部引导类(。我有消息列表，它在列表容器自定义组件中使用jQuery自动向下滚动，例如：

export default Component.extend({
didRender() {
this.$().parents('html, body').scrollTop(this.$(document).height()); // Scroll immediately
}
});

在这里，我为列表设置了边距：

<div id="ember390" class="ember-view">
<div class="container-fluid pt-5" style="border: 1px solid red;margin-bottom: 32vh;">
<div class="d-flex flex-column">
<div class="p-2">
1
</div>
<div class="p-2">
.......

我正在添加底部边距：32hv，它"抬起"了消息输入框上的消息列表。此解决方案适用于全高清屏幕。 一旦我在小型显示器上尝试相同的视图，边距底部：32hv是不够的，因为 Bootstrap 响应。

我有一个解决方案，但不确定它是否正确。 我可以通过窗口大小和消息框容器计算边距底部值。

这只是一种方式，还是我可以用纯 CSS 做同样的事情？

另一个问题是将 jQuery 与 Ember.js 一起使用，因此我无法访问消息列表容器组件中的消息输入容器。

这是示例 https://www.bootply.com/QKVffslOIf

Answer 1

所以，如果你正在做一个聊天应用程序，就像我在 https://emberclear.io 做的一样，我认为flexbox可能更适合你。

基本上，这可以用纯CSS来完成！ :)

这是我做的：

聊天/模板.hbs

<div class='flex-grow flex-column align-items-stretch chat-container'>
{{outlet}}
</div>

聊天/私下/模板.hbs：

<ChatHistory class='flex-grow flex-column' @messages={{messages}}/>
<ChatEntry class='p-l-md p-r-md' @to={{model.targetIdentity}} />

我一直在多个项目中随身携带它，但这是正在发生的事情的要点——不确定 bootstrap 是否有类似的类(我正在使用 bulma sass 函数和变量(：

@mixin flexUtils($modifier) {
.flex-row#{$modifier} {
display: flex !important;
flex-direction: row;
}
.flex-column#{$modifier} {
display: flex !important;
flex-direction: column;
}
.flex-wrap#{$modifier} { flex-wrap: wrap; }
.flex-grow#{$modifier} { flex-grow: 1; }
.flex#{$modifier} { display: flex; }
@for $i from 0 through 20 {
.flex-width-#{$i * 5}#{$modifier} {
flex-basis: #{$i * 5%};
}
}

.align-items-start#{$modifier} { align-items: flex-start; }
.align-items-end#{$modifier} { align-items: flex-end; }
.align-items-center#{$modifier} { align-items: center; }
.align-items-stretch#{$modifier} { align-items: stretch; }
.align-items-baseline#{$modifier} { align-items: baseline; }
.justify-content-start#{$modifier} { justify-content: flex-start; }
.justify-content-end#{$modifier} { justify-content: flex-end; }
.justify-content-center#{$modifier} { justify-content: center; }
.justify-content-space-between#{$modifier} { justify-content: space-between; }
.justify-content-space-around#{$modifier} { justify-content: space-around; }
.justify-content-space-evenly#{$modifier} { justify-content: space-evenly; }
}

@include mobile {
@include flexUtils('-mobile');
}
@include tablet {
@include flexUtils('-tablet');
}
@include desktop {
@include flexUtils('-desktop');
}
@include flexUtils('');