聚合物标签下的聚合物铁列表不可滚动

Question

我们目前有一个包含 3 个标签的纸质标签视图，每个标签都加载自己的铁页。在 Iron 页面中，我们使用 API 拉取元素列表。铁列表成功加载api结果但我们只能查看前几个元素。

其他元素被隐藏，因为我们无法滚动。我们如何使列表可滚动？随着列表视图大小的增长。选择特定选项卡时会动态加载列表。

<paper-drawer-panel id="paperDrawerPanel">
  <!-- Drawer Scroll Header Panel -->
  <paper-scroll-header-panel drawer fixed>

    <!-- Drawer Toolbar -->
    <paper-toolbar id="drawerToolbar">
        <span class="paper-font-title"><div class="logo"></div></span>
    </paper-toolbar>

    <!-- Drawer Content -->
    <paper-menu class="list" attr-for-selected="data-route" selected="[[route]]">
      <a data-route="home" href="/" >
        <iron-icon icon="home"></iron-icon>
        <span>Home</span>
      </a>

      <a data-route="todays-sminq" href="/todays-sminq" on-click="onDataRouteClick">
        <iron-icon icon="info"></iron-icon>
        <span>Today's sminq</span>
      </a>

      <a data-route="upcoming-sminq" href="/upcoming-sminq" on-click="onDataRouteClick">
        <iron-icon icon="mail"></iron-icon>
        <span>Upcoming sminq</span>
      </a>
      <a on-click="logOut">
        <iron-icon icon="user"></iron-icon>
        <span>Log Out</span>
      </a>
    </paper-menu>
  </paper-scroll-header-panel>

  <!-- Main Area -->
  <paper-header-panel main condenses keep-condensed-header>

    <!-- Main Toolbar -->
    <paper-toolbar id="mainToolbar" class="small">
      <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
      <span class="flex"></span>

      <!-- Toolbar icons -->
      <paper-icon-button icon="refresh"></paper-icon-button>
      <paper-icon-button icon="search"></paper-icon-button>

      <!-- Application name -->
      <div class="middle middle-container center horizontal layout">
        <div class="app-name">Sminq</div>
      </div>

      <!-- Application sub title -->
      <!--<div class="bottom bottom-container center horizontal layout">-->
        <!--<div class="bottom-title paper-font-subhead">waiting is now fun</div>-->
      <!--</div>-->

    </paper-toolbar>

    <!-- Main Content -->
    <div class="content">
      <iron-pages attr-for-selected="data-route" selected="{{route}}">

        <section data-route="home" >
            <live-sminq ></live-sminq>
          <!--paper-material elevation="1">



          </paper-material>
          <paper-material elevation="1">
          </paper-material>

          <paper-material elevation="1" class="paper-font-body2">
          </paper-material-->

        </section>

        <section data-route="todays-sminq" id="sectiontodays" >
            <todays-sminq></todays-sminq>

            <!--paper-material elevation="1">
          </paper-material-->
        </section>

        <section data-route="sminq-info">
            <sminq-single
                  token_id ="{{params.id}}" token_number="{{params.no}}" user_name="{{params.name}}"
                  status_type="{{params.status}}"
                  user_mobile ="{{params.mobile}}"
                  queue_id ="{{params.queueId}}"
                  sminq_type="{{params.sminqType}}"
                  joinDate="{{params.date}}"
              >
            </sminq-single>
        </section>

        <section data-route="live-tokens"class="layout vertical fit">
          <live-tokens
                  queue_id="{{params.id}}" user_name="{{params.name}}">
          </live-tokens>
        </section>

        <section data-route="upcoming-sminq">
          <upcoming-sminq>
          </upcoming-sminq>
        </section>
        <section data-route="not-found">
          <paper-material elevation="1">
            <h2 class="page-title">Page Not Found</h2>
            <p></p>
          </paper-material>
        </section>
      </iron-pages>

    </div>
  </paper-header-panel>
</paper-drawer-panel>

这是我们的主要 index.html 我们创建了单独的模块来加载选项卡和列表视图 该模块的代码附在下面

<iron-ajax
  id="list"
  headers='{"Authorization": "xxxx","X-Vertical-Type": "xxx" }'
  content-type="application/json"
  url=""
  handle-as="json"
  method="GET"
  on-error="handleErr"
  debounce-duration="300"
  last-response="{{ liveQueues }}"
  on-response="ajaxResponse">
</iron-ajax>
<!--<template auto is="dom-if" if="{{loading}}"style="width:100%;">-->
<!--<paper-progress value="10" indeterminate="true" ></paper-progress>-->
<!--</template>-->
<div></div>
<span style="display:none;">[[selected]]</span>
<paper-spinner id="spinner" alt="Loading tokens numbers" ></paper-spinner>
<paper-tabs id="scrollableTabs" selected={{selected}} scrollable >
  <template is="dom-repeat" items="[[liveQueues]]" as="queue" >
    <paper-tab on-click="listLiveTokens" >[[queue.queueName]]</paper-tab>
  </template>
</paper-tabs>
<iron-pages selected="{{selected}}">
  <template is="dom-repeat" items="[[liveQueues]]" as="queue" >
    <paper-material elevation="1">
        <iron-list items="[[queueTokens]]" as="token">
          <template>
            <div>
              <div class="item" tabindex="0">
                <span class="avatar" >[[token.tokenNumber]]</span>
                <a href$="{{_getDetailsLink(token.tokenId,token.tokenNumber,token.userName,token.statusType,token.userMobile,token.joinDate)}}">
                  <div class="pad">
                    <div class="primary">[[token.userName]]</div>
                    <div class="secondary">[[token.userMobile]]</div>
                    <div class="secondary dim">[[token.notes]]</div>
                      <div class="secondary dim">[[token.joinTime]]</div>
                  </div>
                </a>
                <iron-icon icon$="[[iconForItem(sminq)]]"></iron-icon>
              </div>
            </div>
          </template>
        </iron-list>
    </paper-material>
  </template>
</iron-pages>
<iron-ajax
  id="tokens"
  headers='{"Authorization": "xxx","X-Vertical-Type": "xxxx" }'
  content-type="application/json"
  url=""
  handle-as="json"
  method="GET"
  on-error="tokenError"
  debounce-duration="300"
  last-response="{{ queueTokens }}"
  on-response="tokenResponse">
</iron-ajax>
<template is="dom-if" if="{{isQueueId}}">
  <sminq-add  queue_id="{{queueId}}"></sminq-add>
</template>

Answer 1

您可以实现IronResizableBehavior 在切换标签时调整列表大小（注意：默认情况下它应该可以工作）：

iron-list 在通过 resize 事件收到通知时对项目进行布局。此事件由任何实现 IronResizableBehavior 的元素触发。

默认情况下，iron-pages、paper-tabs 或 paper-dialog 等元素会自动触发此事件。如果您手动隐藏列表（例如，您使用 display: none），您可能希望在列表再次可见后立即实现 IronResizableBehavior 或手动触发此事件。例如

document.querySelector('iron-list').fire('resize');