高分子：如何附加滚动事件？

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>

那应该允许细节面板可滚动并触发滚动事件。