polymer - 如何使用 has-scrolling-region 在 app-header-layout 中的 Iron-list 上设置滚动目标

Question

我正在尝试使用 iron-list (和 iron-scroll-threshold )在 app-header-layout 中与 has-scrolling-region .

我使用 polymer CLI 生成了基本的应用程序布局。

如果我不使用 has-scrolling-region在 app-header-layout并使用 "document"对于 scroll-target在 iron-list它有点工作。但是使用这个解决方案，滚动条属于窗口并且不会在标题下方滑动，我显然无法获得通常与这些类型的布局相关的漂亮“瀑布”行为。

因此，我使用 has-scrolling-region在 app-header-layout ，但是将相应的 scoller 传递给 scroll-target 的正确方法是什么？ iron-list 的属性(property)?

  <!-- Main content -->
  <app-header-layout has-scrolling-region id="layout">
    <app-header condenses reveals effects="waterfall">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div title>Twiamo</div>
      </app-toolbar>
    </app-header>

    <iron-pages role="main" selected="[[page]]" attr-for-selected="name" id="page">
      <my-iron-list name="view1" scroll-target="[[_getScrollTarget()]]"></my-iron-list>
      <my-view2 name="view2"></my-view2>
      <my-view3 name="view3"></my-view3>
    </iron-pages>
  </app-header-layout>

我研究了 app-header-layout 的实现找到正确的元素。这个表达式实际上为我提供了正确的元素，并且一切正常。

_getScrollTarget: function() {
    return this.$.layout.shadowRoot.querySelector("#contentContainer");        
}

但一定有更好的、正确的方法吗？进入 app-header-layout 的影子 DOM不完全使用“公共(public)接口(interface)”!

为了完成这个例子，这里是我的代码 my-iron-list . My-iron-list包裹和熨斗 list ， iron-scroll-theshold ，以及一些虚拟数据提供者的东西。 scroll-target在 my-iron-list刚刚传递给 iron-list和 iron-scroll-threshold在 my-iron-list 内:

<dom-module id="my-iron-list">
  <template>
    <iron-list items="[]" as=item id="list" scroll-target="[[scrollTarget]]">
      <template>
        <div class="item">[[item]]</div>
      </template>
    </iron-list>

    <iron-scroll-threshold
        id="scrollTheshold"
        lower-threshold="100"
        on-lower-threshold="_loadMoreData"
        scroll-target="[[scrollTarget]]">      
    </iron-scroll-threshold>    
  </template>

  <script>
    Polymer({

      is: 'my-iron-list',

      properties: {
        page: {
            type : Number,
            value : 0
        },
        perPage: {
            type : Number,
            value : 100
        },
        scrollTarget: HTMLElement,
      },

      _pushPage: function() {
          for (i = 0; i < this.perPage; i++) {
            this.$.list.push('items', 'Entry number ' + (i+1+this.page*this.perPage));   
          }
      },

      _loadMoreData: function() {
          this._pushPage();
          this.page = this.page + 1;
          this.$.scrollTheshold.clearTriggers();
      }
    });
  </script>
</dom-module>

Answer 1

我和你有同样的问题，现在我最干净的答案是使用 app-header scrollTarget。

在您的情况下，将 id 添加到 app-header

 <app-header condenses reveals effects="waterfall" id="header">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div title>Twiamo</div>
      </app-toolbar>
 </app-header>

然后代替

_getScrollTarget: function() {
    return this.$.layout.shadowRoot.querySelector("#contentContainer");        
}

只需使用 scrollTarget 属性

_getScrollTarget: function() {
    return this.$.header.scrollTarget;     
}

如果你发现了更好的方法，请告诉我。

干杯，