Question

我正在创建聊天页面。我正在用铁列表更新消息。每次我将邮件添加到该模板中array iron-list。现在我希望在底部显示最后添加的消息。目前，用户必须滚动到底部并查看该消息。

// Polymer
  properties: {
    messageItem: { type: Array, notify: true, value: function() { return []; } },
  },

# Html
<iron-list items="[[messageItem]]" as="item">
  <template>...</template>
</iron-list>

推送代码：

this.push('messageItem', {name: 'bot', message: event.data});

我应该采取哪些必要步骤来实现这一目标？

Answer 1

您可以在将项目添加到列表并允许其呈现后将<iron-list>.scrollTop设置为其scrollHeight。您可以将Polymer.RenderStatus.afterNextRender()用于此目的：

// template
<iron-list id="list">...</iron-list>

// script
_addItem: function() {
  this.push('items', ...);
  Polymer.RenderStatus.afterNextRender(this, () => {
    this.$.list.scrollTop = this.$.list.scrollHeight;
  });
}

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    properties: {
      items: {
        type: Array,
        value: () => [0,1,2]
      }
    },
    _addItem: function() {
      this.push('items', this.items.length);
      this._scrollToBottom();
    },
    _scrollToBottom: function() {
      Polymer.RenderStatus.afterNextRender(this, () => {
        this.$.list.scrollTop = this.$.list.scrollHeight;
      });
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-list/iron-list.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        iron-list {
          border: solid 1px red;
          height: 100px;
        }
      </style>
      <button on-tap="_addItem">Add item</button>
      <iron-list id="list" items="[[items]]">
        <template>
          <div>[[item]]</div>
        </template>
      </iron-list>
    </template>
  </dom-module>
</body>

codepen

Answer 2

我没有使用iron-list，但是根据我的想法，messageItem是一个对象数组，因此您可以通过其中一个对象的属性（例如index）对其元素进行排序。我可以在他们的文档中看到他们有一个你可以添加的索引属性。这意味着，您可以使用索引对对象数组进行降序排序，所以请执行以下操作：

messageItem.sort(function(index1, index2){return index1-index2});

，其中

index1 = messageItem[i].index; and index2 = messageItem[i-1].index;

这是我最好的主意：）

如何在铁列表中显示最后一项？

2 个答案: