[英]How to show last item visible in iron-list?
我正在创建聊天页面。 我正在用铁清单更新消息。 每次我向要添加到该模板的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});
我应该采取哪些必要步骤来实现这一目标?
在将项目添加到列表并允许其呈现之后,可以将<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>
我没有使用Iron-list,但据我所知,messageItem是一个对象数组,因此您可以按对象属性之一的值(例如索引)对元素进行排序。 我在他们的文档中看到他们具有可以添加的index属性。 这意味着,您可以使用降序对对象数组进行降序排序,因此请执行以下操作:
messageItem.sort(function(index1, index2){return index1-index2});
哪里
index1 = messageItem[i].index; and index2 = messageItem[i-1].index;
那是我最好的主意:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.