响应式视图，例如使用 Bootstrap 4 和 Ember 的 Whatsapp web

Question

我正在尝试实现类似 UI 的 Whatsapp Web。 我正在使用 Bootstrap 4 和 Ember 3.2。 基本想法现在正在发挥作用。我已经完成了视图底部的消息框（使用 fixed-bottom Bootstrap 类）。我有消息列表，它使用 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">
.......

我正在添加 ma​​rgin-bottom: 32hv 这是“提升”消息输入框中的消息列表。此解决方案适用于全高清屏幕。 一旦我在小型显示器上尝试相同的视图，ma​​rgin-bottom: 32hv 是不够的，因为 Bootstrap 响应式。

我有一个解决方案，但不确定它是否正确。 我可以通过窗口大小和消息框容器计算 ma​​rgin-bottom 值。

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

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

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

Answer 1

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

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

这是我的工作：

聊天/template.hbs

<div class='flex-grow flex-column align-items-stretch chat-container'>

  {{outlet}}

</div>

聊天/私聊/template.hbs：

<ChatHistory class='flex-grow flex-column' @messages={{messages}}/>

<ChatEntry class='p-l-md p-r-md' @to={{model.targetIdentity}} />

我在多个项目中都带着这个，但这是正在发生的事情的要点——不确定引导程序是否有类似的类（我正在使用 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('');