How to show last item visible in iron-list?
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. 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 ?
2 answers
solution1
1 ACCPTED 2016-11-21 10:39:41
You could set <iron-list>.scrollTop to its scrollHeight after adding an item to the list and allowing it to render. You could use Polymer.RenderStatus.afterNextRender() for that purpose:
// 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>
solution2
0 2016-11-21 09:36:27
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. I can see in their documentation that they have an index attribute you can add. 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 :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.