ember.js - 带有新版 ember js 的粘性聊天框

Question

我正在尝试使用新版本的 ember js 建立聊天，并且在聊天正文上遇到滚动条问题，基本上我需要的是当用户滚动到底部时，应该显示新消息。如果他们向上滚动阅读旧消息，则聊天保持静止。如何获得这种情况有人可以帮忙吗

标签： ember.jschatviewport

Answer 1

如果我正确理解您的问题，您希望在用户向下滚动到屏幕底部时加载更多数据。在 Ember Octane 中，处理此问题的最佳方法是使用修饰符。你可以自己写一个，但是有一个非常好的NPM 包可以为你提供这个

完成npm install ember-in-viewport并重新启动您的 ember 开发服务器后。您可以创建一个包含聊天列表的组件

<ul id="messages">
  {{#each this.messages as |message|}}
    <li>{{message.txt}}</li>
  {{/each}}
  <div {{in-viewport onEnter=this.startLoading onExit=this.stopLoading scrollableArea="#messages"}}></div>
</ul>

每当最后div进入用户屏幕时，它都会调用startLoading，您可以在其中轮询新消息并更新messages属性，但只要div没有离开用户视口，它将调用stopLoading可以关闭轮询，直到用户到达末尾再次列出。