Javascript 聚合物芯和纸元件的性能与大列表

我有一个相当简单的可切换菜单项列表，其中只有一个菜单项可以打开（“手风琴”菜单），由聚合物核心和纸元素构成

在我的示例中，有500个“大”项目列表，即使在高端android手机（oneplus 1）上的性能也非常糟糕，切换“菜单”需要几秒钟。即使使用台式机，单击项目时也会有明显的延迟

我的示例可在网站上获得，源代码位于devel.html和page-results.html（index.html是应用程序“硫化”为单个文件）

总而言之，有一个自定义元素具有如下重复模板：

     <template id="results" repeat="{{r in r}}">
       <core-item lines>
        <paper-item flex noink id="p{{r.id}}"><a on-click="{{toggle}}" data-id="{{r.id}}"
        >{{r.title}}</a></paper-item>
       </core-item>
       <template if="{{r.active}}">
         <paper-menu-button style="float: right;">
            <paper-icon-button icon="more-vert" style="color: #aaa"></paper-icon-button>
            <paper-dropdown class="dropdown" halign="right">
              <core-menu class="menu">
                  <paper-item data-id="{{r.id}}" on-click="{{dosomething}}">Do something</paper-item>
                  <paper-item data-id="{{r.id}}" on-click="{{doother}}">Do other stuff</paper-item>
              </core-menu>
            </paper-dropdown>
         </paper-menu-button>
         <core-item flex>{{r.desc}}</core-item>
         <core-item style="clear: both;">
          <img src="{{r.img}}">
         </core-item>
       </template>
     </template>

{{r.title}}
做点什么
做其他事情
{{r.desc}}

---

“toggle”（切换）功能为模型中的每个阵列对象从模型切换“active”（活动）。

我设法解决了core list（核心列表）和core overlay（核心覆盖）的性能问题，单击core list（核心列表）项会打开一个覆盖，可以通过单击其他位置取消该覆盖。这实际上是一个非常好的UI，有点不同，但肯定和我最初的“手风琴”菜单一样好（甚至更好！）

该解决方案位于同一个github repo（corelist.html和page list.html），并且该解决方案在线于

有关守则如下：

 <core-overlay id="overlay" layered backdrop>
    <div style="background:white; width:100vw" core-overlay-toggle>
     <paper-menu-button style="float: right;">
    <paper-icon-button icon="more-vert" style="color: #aaa"></paper-icon-button>
    <paper-dropdown class="dropdown" halign="right">
      <core-menu class="menu">
          <paper-item data-id="{{oid}}" on-click="{{dosomething}}">Do something</paper-item>
          <paper-item data-id="{{oid}}" on-click="{{doother}}">Do other stuff</paper-item>
      </core-menu>
    </paper-dropdown>
     </paper-menu-button>
     <core-item flex core-overlay-toggle>{{odesc}}</core-item>
     <img src="{{oimg}}" style="clear: both;">
    </div>
 </core-overlay>

 <core-list id="list" data="{{r}}" flex height=48 on-core-activate="{{toggle}}" >
  <template>
   <core-item lines>{{model.title}}</core-item>
  </template>
 </core-list>

做点什么
做其他事情
{{odesc}}
{{model.title}}

---

{{toggle}}函数根据模型数据设置覆盖中的变量，并将其切换为可见。

目前，以这种方式使用模板重复将非常缓慢。如果您可以使用核心列表，那么这就是推荐的方法（）。但是，您提到您的列表打开和关闭，它是否会向下推其他列表项？如果是这样，核心列表可能不适合您。谢谢您的评论！我可以尝试找出其他类型的解决方案，主要是我（可能）有大量的项目需要显示，单击每个项目需要打开某种菜单（项目的详细信息），它应该可以很快地从查看一个项目返回以继续浏览并选择另一个要查看的项目。core-list可以让您轻松查看数百个项目，它是为特定目的而设计的，因此如果您可以设计菜单，使其在core-list的限制范围内工作，你们都准备好了。我设法用核心列表和核心覆盖来做，我会发布一个答案。一个很大的障碍是要理解如何处理“核心列表必须调整大小或在溢出：自动div调整大小”错误。这方面的文件确实可以提供一些提示。提示@robdodson:）