高分子：如何附加滾動事件？

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>

那應該允許細節面板可滾動並觸發滾動事件。