我在该页面上创建了一个页面,我有一个纸质项目。
<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>
我想在该列表下方滚动此列表之后加载另一个页面 history-data 。 我使用 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 无效。我错过了什么或者不是正确的方式。任何人帮助我。提前谢谢。
答案 0 :(得分: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>
这应该允许细节面板可滚动并触发滚动事件。