如何显示铁表中可见的最后一项？
如何显示铁表中可见的最后一项？
提问于 2016-11-21 09:14:54
我正在创建聊天页面。我正在用铁表更新信息。每次我向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});我应该采取哪些必要步骤来实现这一目标？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-21 10:39:41
在将项添加到列表并允许其呈现后，可以将<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>
码页
Stack Overflow用户
发布于 2016-11-21 09:36:27
我没有使用铁列表，但据我所知，messageItem是一个对象数组，因此您可以根据对象的一个属性值(例如索引)对其元素进行排序。我可以从他们的文档中看到，他们有一个您可以添加的索引属性。这意味着，您可以使用索引对降序对象数组进行排序，因此可以执行以下操作：
messageItem.sort(function(index1, index2){return index1-index2});哪里
index1 = messageItem[i].index; and index2 = messageItem[i-1].index;这是我最好的主意:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40716462
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号