问题标签 [iron-list]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
701 浏览

polymer - 内容滚动上的聚合物事件未触发

我有一个iron-list在滚动到底部时添加新项目的iron-scroll-threshold. 这很好用。

我还需要一个在滚动停止时触发的一般事件。

我需要知道用户是否看到了列出的项目(m.message)方法是检查滚动后哪些项目当前在视口中可见,然后将它们标记为“已读”。

然而,处理程序_scrollHandler永远不会被解雇。

滚动结束后获取事件需要什么?

0 投票
1 回答
582 浏览

drop-down-menu - 聚合物纸下拉菜单不覆盖铁列表

我的问题与此处的问题类似:paper-menu-button's dropdown (paper-menu) not overlay other iron-list items,但没有提出适当的解决方案。

问题是我有一个<paper-dropdown-menu>,它在它所在的项目内正确打开<iron-list>,但位于以下项目下方<iron-list>截屏

我有一个简单<paper-dropdown-menu>的这样的:

它被插入到另一个元素中<iron-list>(它加载一个带有 的 JSON 文件<iron-ajax>):

我尝试将每个<iron-list>项目的 z-index 设置为 1,但这不起作用。我尝试使用<iron-overlay>,但我没有设法完成。我对 Polymer 很陌生,所以如果有人有解决方案或解决方法,那就太好了。

0 投票
1 回答
430 浏览

css - 带有 flexbox 的聚合物熨斗列表

我正在努力iron-listiron-flex-layoutand相处融洽paper-card。我希望的是paper-card在两个轴上弯曲扩展以覆盖页面(其边距作为保险杠),然后iron-list在其容器中垂直扩展以显示我的铁列表及其所有“虚拟列表”魔法.

我哪里错了?

小提琴:https ://jsfiddle.net/4czLkjfj/

0 投票
1 回答
194 浏览

javascript - 当滚动条在 shadow-dom 之外时,部分加载聚合物铁列表

我的 Polymer 应用程序使用 app-layout-structure。根元素可以简化如下:

单击菜单选项时,将显示该页面。一页列出了许多我想要在 <iron-list> 中的项目。

我在滚动时无法调整大小,因为滚动条位于其父级的父级中。

我坚持让列表显示点击次数的滚动偏移量,并且永远不会加载更多。属性 firstVisibleIndex (0) 和 lastVisibleIndex (8, 显示的项目数,小于滚动偏移量) 保持不变。当我设置 iron-list.scrollTarget (iron-pages,app-header-layout 不起作用)并 fire iron-resize 显示所有其他项目时,lastVisibleIndex 是最后一个索引。

0 投票
2 回答
500 浏览

polymer - dynamically edit template of iron-list

At first, i know, there are many questions about iron-list. But mostly about editing items and not whole template inside iron-list..

My code is really extremely complicated and posting it is pointless. I am working on data-tables which are using iron-list. I have element called diamond-listing and inside this diamond-listing i have iron-list.

You can image this like: Parent element define <template> with some content inside it, and child element (diamond-listing) will render this template as a table

Of course diamond-listing is used multiple times in my application and always with different template. For example: page users have columns with userID, userName etc.. and on page stations there are columns stationID, address etc.. with different number of columns. Every pagea has it's own <template> which i am trying to propagate to diamond-listing. For example:

What i managed to do is to make it work in shadow dom using <slot> and simply rewrite <template> inside <iron-list>, but here we are.. For example using Firefox, which doesn't support webcomponents, there isn't <template> as a child of <iron-list> (because there is no shadow-dom) so there is no way how to update <template> and render iron-list.

What i tried:

1) Find template inside iron-list and use removeChild and appendChild functions.

Without success.

2) Define in HTML empty iron-list without any template inside it. And then in javascript add template dynamically. Without success. ( iron-list is crying it requires template)

3) Create dynamically iron-list using document.createElement

result: same as 2) ...

Is there a way, how to update template which is used to render all items in iron-list?

Or create iron-list with defined template inside JS ?

Or somehow do it with dom-repeat ? I won't have more than 10 items in listing, since it's fully pagination listing. ( this is propably simplest solution, but i don't know how to render <template> for every iteration

0 投票
1 回答
57 浏览

polymer - 隐藏在 Polymer 中铁数据表的铁列表后面的弹出框和日期时间选择器组件

当我单击第 5 行内的组件时,组件未被 1、2、3 和 4 行隐藏。仅在第 5 个 (6,7,8..) 之后按行隐藏组件

一些影响组件样式的 flex 属性。

在这种状态下工作正常

表格列表后面的数据

0 投票
1 回答
72 浏览

javascript - 如何从浏览器扩展/用户脚本中编辑和排序 Polymer Iron 列表?

我想编写一个 Chrome 扩展程序,为使用 Polymer 的站点上的每个列表条目添加一些数据并<iron-list>显示数据。我没有 Polymer 或 Web Components 的经验,但看起来我需要编辑使用的模板;那是对的吗?

该站点有一个<iron-list>包含一个空的标签<array-selector id="..."></array-selector>,然后<div>它又包含一个<template id="..."></template>,然后是一堆列表条目(使用自定义标签)。
列表条目是延迟加载的,因此一次只存在大约 20 个,即使列表更大。

模板标签在 DevTools 中看起来是空的(它只显示“#document-fragment”),而且我也没有成功地进一步使用 JavaScript。

之后的下一步是根据我添加到列表中的一些数据对列表进行排序。

我该如何进行?一般来说,我需要知道什么才能开始在这个项目上取得进展?

0 投票
1 回答
303 浏览

javascript - 在 Polymer 1.0 中使用 Iron-list 平滑自动滚动

当我单击一个按钮时,我希望平滑地自动滚动到 Polymer 1.0 铁列表中的特定元素。

现在我有了一个简单的自动滚动,这要归功于scrollToIndex方法。但我想要一个流畅的动画,比如 jQuery 动画$("#list").animate({ scrollTop: 300 }, 2000);,但没有 jQuery

我遇到的一个大问题是,由于 iron-list 不会一次显示所有项目,我找不到特定项目的 scrollTop 位置,因为它还没有在 DOM 中。

我在这里开始了一个 JSFiddle:http: //jsfiddle.net/c52fakyf/2/

谢谢你的帮助!

0 投票
1 回答
136 浏览

arrays - 数组中的变异数组(Polymer iron-list)

我目前在另一个熨斗列表中有一个熨斗列表。父项的数据来自 firebase-query 元素,子项的数据是从每个父项计算得出的。db 结构和代码看起来有点像这样:

选择任意数量的项目后,用户可以点击工厂批量编辑价格。这就是我遇到问题的地方。我不知道如何访问正确的子铁列表以调用 list.set ...我目前正在尝试以下非常讨厌的方法:

我正在迭代所选项目以提取项目索引,然后迭代父铁列表数据(categoryItems)以检查给定项目是否存在于该数据子集中。如果是这样,那么我使用类别索引并尝试使用给定路径在父铁列表上调用 set 来访问我要编辑的实际项目。正如预期的那样,这失败了。希望我已经让自己足够清楚,任何帮助将不胜感激!

编辑#1:

经过多次试验,我终于弄清楚了如何正确地变异子铁列表:

有几点值得注意。我正在使用 querySelector 而不是推荐的 this.$$(selector) 因为我一直遇到“函数 DNE”错误。但现在我有另一个问题......调用函数后,值得到正确更新,但我收到以下错误:

这是完整错误消息的图片: 在此处输入图像描述

我看到了光明,希望有人能帮助我!

0 投票
0 回答
136 浏览

polymer - 聚合物 - 调整大小不适用于铁列表

我有一个嵌套元素,它的模板如下:

这有我在更改时IronResizableBehavior明确调用的。notifyResizeisFullShown

这嵌套在另一个元素中,该元素也具有IronResizableBehavior

这又嵌套在我的铁列表中

当我开火时,我会显示隐藏的文本并调用notifyResize,如果我正在查看检查,我希望看到translate3D列表中所有项目的属性发生变化,以表明由于项目大小而正在重新布局-改变......但我没有。

我究竟做错了什么?