Polymer 1中iron-scroll-threshold与app-header-layout搭配失效求助

我之前也碰到过一模一样的情况——在Polymer 1.11里，把iron-scroll-threshold放在app-header-layout内部的iron-list里时，滚动加载完全没反应。核心问题出在滚动目标的绑定错误，app-header-layout有自己的内部滚动容器，而你的组件默认监听的不是这个容器的滚动事件。

下面是具体的修复步骤：

1. 给app-header-layout添加ID并传递滚动容器 #

首先在主模板里给app-header-layout加上id，这样能获取到它的内部滚动容器：

<app-header-layout id="mainHeaderLayout">
  <!-- 你的app-header和iron-pages内容 -->
</app-header-layout>

然后在使用time-line组件时，把app-header-layout的内部滚动容器（scrollTarget属性）传递给它：

<time-line name="foo" scroll-target="[[mainHeaderLayout.scrollTarget]]"></time-line>

2. 修改time-line组件的滚动目标绑定 #

在time-line组件里，让iron-scroll-threshold和iron-list都使用传递过来的滚动容器，而不是互相绑定：

<dom-module id="time-line">
  <template>
    <!-- 其他元素（app-location、app-route、iron-ajax）保持不变 -->
    <style is="custom-style">
      iron-list {
        /* 必须给iron-list设置高度，否则无法正确滚动 */
        height: 100%;
        overflow: hidden;
      }
    </style>
    <iron-scroll-threshold id="threshold" 
                           on-lower-threshold="_loadMoreData"
                           scroll-target="[[scrollTarget]]">
      <iron-list id="list" items="[[datas]]" as="data" 
                 scroll-target="[[scrollTarget]]">
        <template>
          <div class="layout vertical">
            <p>[[data]]</p>
          </div>
        </template>
      </iron-list>
    </iron-scroll-threshold>
  </template>
  <script>
    Polymer({
      is : "time-line",
      properties: {
        scrollTarget: {
          type: Object,
          // 确保滚动容器变化时重新绑定
          observer: '_scrollTargetChanged'
        },
        pagee: {
          type: Number,
          value: -1
        },
        datas: {
          type: Array,
          value: []
        }
      },
      // 可选：滚动目标变化时触发重新初始化
      _scrollTargetChanged: function(newTarget) {
        if (newTarget && !this.datas.length) {
          this.init();
        }
      },
      init: function() {
        this.pagee = 0;
        this.$.loadData.params = { "page" : this.pagee };
        this.$.loadData.generateRequest();
      },
      dataLoaded: function(e) {
        if (!this.datas) this.datas = [];
        if (e.detail.response.length > 0) {
          e.detail.response.forEach(function(element) {
            this.push("datas", element);
          }.bind(this));
          this.$.threshold.clearTriggers();
        }
      },
      _loadMoreData: function() {
        this.pagee++;
        this.$.loadData.params = { "page" : this.pagee };
        this.$.loadData.generateRequest();
      }
    });
  </script>
</dom-module>

3. 关键细节说明 #

• 滚动容器的本质：app-header-layout的滚动区域是它内部的#contentContainer元素，通过scrollTarget属性可以直接获取到它，这才是我们需要监听滚动事件的目标。
• iron-list的高度：Polymer 1的iron-list必须有明确的高度（比如100%或者固定像素值）才能正确计算滚动位置，否则会无法触发滚动阈值。
• scroll-target的一致性：iron-scroll-threshold和iron-list必须绑定同一个滚动容器，这样滚动事件才能被正确监听。

这样修改后，iron-scroll-threshold就能正确检测到滚动到底部的事件，触发_loadMoreData方法加载更多数据了。

内容的提问来源于stack exchange，提问作者yglodt