Question

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

有一个“大”项目列表，在我的例子中500，即使在高端Android手机（oneplus one）上的表现也很糟糕，“菜单”切换需要几秒钟。即使使用台式机，点击项目时也会有明显的延迟。

我的示例可在http://viljoviitanen.github.io/polymer-performance-problem/在线获取，源代码位于https://github.com/viljoviitanen/polymer-performance-problem 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>

“切换”功能可以从模型中为模型中的每个数组对象切换“活动”。

Answer 1

我设法用core-list和core-overlay解决了性能问题，单击核心列表项会打开一个叠加层，可以通过单击其他位置来解除。这实际上是一个非常好的用户界面，有点不同但肯定和我最初的手风琴＆＃34;手风琴一样好。菜单（甚至更好！）。

解决方案位于同一个github repo（https://github.com/viljoviitanen/polymer-performance-problem corelist.html和page-list.html），解决方案在http://viljoviitanen.github.io/polymer-performance-problem/index2.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>

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

具有大型列表的聚合物核心和纸张元素性能

1 个答案: