如何显示铁清单中可见的最后一个项目？

Question

I'm creating chat page. 我正在创建聊天页面。 And I'm updating message with iron-list. 我正在用铁清单更新消息。 Everytime I pusshed message to array iron-list added into that template. 每次我向要添加到该模板的array iron-list发送消息时。 Now I want last appended message visible in the bottom. 现在，我希望在底部显示最后添加的消息。 Currently user have to scroll to bottom and see that message. 当前，用户必须滚动到底部并查看该消息。

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

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

Push code: 推送代码：

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

What necessary steps should I take to achieve this ? 我应该采取哪些必要步骤来实现这一目标？

Answer 1

You could set <iron-list>.scrollTop to its scrollHeight after adding an item to the list and allowing it to render. 在将项目添加到列表并允许其呈现之后，可以将<iron-list>.scrollTop设置为其scrollHeight 。 You could use Polymer.RenderStatus.afterNextRender() for that purpose: 您可以为此使用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

I didn't use iron-list, but from what I can figure, messageItem is an array of objects, so you can sort its elements by the value of one of the objects' attributes, for example index. 我没有使用Iron-list，但据我所知，messageItem是一个对象数组，因此您可以按对象属性之一的值（例如索引）对元素进行排序。 I can see in their documentation that they have an index attribute you can add. 我在他们的文档中看到他们具有可以添加的index属性。 Which means, you can sort the object array descending using index, so do something like: 这意味着，您可以使用降序对对象数组进行降序排序，因此请执行以下操作：

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

where 哪里

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

That's my best idea :) 那是我最好的主意:)

如何显示铁清单中可见的最后一个项目？

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-11-21 10:39:41

解决方案2
0 2016-11-21 09:36:27

如何显示铁清单中可见的最后一个项目？

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-11-21 10:39:41

解决方案2 0 2016-11-21 09:36:27

解决方案1
1 已采纳 2016-11-21 10:39:41

解决方案2
0 2016-11-21 09:36:27