我有这个聚合物元素,其中显示了一个项目列表。我使用iron-list
填充列表。每个列表项都包含一个paper-card
,它隐藏了一些其他自定义元素,当我单击一个按钮时,将显示相应的视图。这一部分的一切都运转良好。
我遇到的问题是,当我显示自定义元素或隐藏元素时,铁列表项高度不会更新。当我显示元素时,元素将显示在其他视图后面,当我隐藏时,出现的空白高度等于显示视图的高度。
下面是列表的代码,
<div on-click="clicked" id="feedlist">
<iron-list items="{{feedList}}" as="item">
<template>
<card-element field="{{item.id}}" feed-id="{{item.id}}" feed-number="{{item.id}}" feed-title="{{item.title}}" feed-name="{{item.name}}" date="{{item.timeStamp}}"></card-element>
</template>
</iron-list>
此card-element
的代码如下所示
<div class="content" id="content">
<text-input id="note" type="1" note="{{response.note}}" feed-id="[[feedId]]"></text-input>
<data-viewer id="dataViewer" plugin-data="{{response.data}}" feed-id="[[feedId]]" default-view="gridView" parent="feed"></data-viewer>
<comment-view id="comment" comments="{{response.comment}}" feed-id="[[feedId]]"></comment-view>
</div>
即时隐藏和显示,文本输入,数据查看器和评论视图,或者根据按钮点击一次显示所有内容。
以下是切换数据查看器的代码
toggleDataView: function (event) {
event.stopPropagation();
if (this.isFeed) {
this.isDataView = false;
this.isFeed = false;
}
this.isDataView = !this.isDataView;
if (this.isDataView) {
this.isComment = false;
this.isNote = false;
this.$.note.hide();
this.$.comment.hide();
this.$.dataViewer.show();
this._showDragView();
} else {
this.$.dataViewer.hide();
this._hideDragView();
}
},
答案 0 :(得分:0)
我认为您需要在更新项目后调用{{1}} https://elements.polymer-project.org/elements/iron-list#method-updateSizeForItem(查看,隐藏,...)