javascript - Polymer:如何附加滚动事件？

Question

我已经创建了一个页面，在该页面上我有一个纸质项目。

<section class="details-panel" on-content-scroll="_scrollHandler">
      <paper-header-panel mode="waterfall" class="paper-font-title" flex >
        <paper-toolbar>
          <div class="paper-header">Info</div>
        </paper-toolbar>
      </paper-header-panel>
      <template class="details-panel" is="dom-repeat" items="{{data}}">
          <paper-item>
            <paper-item-body>
              <div class="horizontal layout center">
                <div class="flex three"><span>{{item.pn}}</span> : </div>
                <div class="flex two">{{item.pv}}</div>                          
              </div>
            </paper-item-body>
          </paper-item>
          <template is="dom-repeat" id="history" items="[[item.av]]" as="subitem">
            <paper-item>
            <paper-item-body>
              <div class="horizontal layout center">
                <div class="flex three"><span>{{subitem.pn}}</span> : </div>
                <div class="flex two">{{subitem.pv}}</div>                         
              </div>
            </paper-item-body>
            </paper-item>
          </template>
      </template>      
    </section>

<section>
  <history-data></history-data>
</section>

我想在将此列表向上滚动到该列表下方后加载另一个页面历史数据。 我使用了 on-content-scroll="_scrollHandler" 但它不起作用。

我尝试了以下代码:

<script>
(function(){
Polymer({
    is: 'doc-detail',
  properties: {
    listeners : {
            'tap' : 'tapEvent'
        },        
    tapEvent : function(e) {
      console.log('you tapped!!')
    },
    _scrollHandler : function(e) {
        console.log("yeyyyyy scroll!!!!!");
    }
  });
})();
</script>

下面是history.html

<dom-module id="history-data">
<link rel="import" href="..\elements.html">
<style>
  :host {
    display: block;   
  }
</style>

<template>

<core-header-panel>
  <div class="core-header">Header</div>
  <div>Content goes here...</div>
</core-header-panel>

</template>
</dom-module>

<script>
(function(){
 Polymer({
    is: 'history-data',
  });
})();
</script>

通过此代码，点击事件正在运行，并在控制台中显示您点击了!!，但_scrollHandler不起作用。我错过了什么或者这不是正确的方法。任何人都可以帮助我。提前致谢。

Answer 1

您没有任何内容可以在纸张标题面板中滚动。将可滚动内容移至</paper-toobar>下方如下所示。

<section class="details-panel" on-content-scroll="_scrollHandler">
  <paper-header-panel mode="waterfall" class="paper-font-title" flex >
    <paper-toolbar>
      <div class="paper-header">Info</div>
    </paper-toolbar>
    <div> scrollable content goes here 
      <template class="details-panel" is="dom-repeat" items="{{data}}">
      <paper-item>
        <paper-item-body>
          <div class="horizontal layout center">
            <div class="flex three"><span>{{item.pn}}</span> : </div>
            <div class="flex two">{{item.pv}}</div>                          
          </div>
        </paper-item-body>
      </paper-item>
      <template is="dom-repeat" id="history" items="[[item.av]]" as="subitem">
        <paper-item>
        <paper-item-body>
          <div class="horizontal layout center">
            <div class="flex three"><span>{{subitem.pn}}</span> : </div>
            <div class="flex two">{{subitem.pv}}</div>                         
          </div>
        </paper-item-body>
        </paper-item>
      </template>
  </template>      
    </div>
       </paper-header-panel>

<section>
  <history-data></history-data>
</section>

这应该允许详细信息面板可滚动并触发滚动事件。