我正在尝试处理滚动阈值事件。使用以下代码行
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-scroll-threshold/iron-scroll-threshold.html">
<dom-module id="documentscroll-app">
<template>
<style>
:host {
display: block;
}
iron-scroll-threshold {
display: none;
}
</style>
<h2>Hello [[prop1]]!</h2>
<!-- scroll-target uses the document scroll -->
<iron-scroll-threshold id="scrollThreshold"
scroll-target="document"
lower-threshold="500"
on-lower-threshold="loadMoreData">
</iron-scroll-threshold>
<h4>
XXXXXXX
MORE LINES TILL SCROLL IS VISIBLE
</h4>
</template>
<script>
/**
* @customElement
* @polymer
*/
class DocumentscrollApp extends Polymer.Element {
static get is() { return 'documentscroll-app'; }
constructor() {
console.log("Constructor getting called ");
super();
} // End of constructor
static get properties() {
return {
prop1: {
type: String,
value: 'documentscroll-app'
}
};
}
loadMoreData ()
{
console.log("Loading more data");
this.$.scrollThreshold.clearTriggers();
}
ready ()
{
console.log("Scroll object is READY");
super.ready();
this.addEventListener('click', this._onClick);
}
_onClick(event) {
console.log("Click getting called");
}
}
window.customElements.define(DocumentscrollApp.is, DocumentscrollApp);
</script>
</dom-module>
下阈值根本没有被调用。我已使用文档作为滚动目标。并且该组件正在按预期创建。也可以看到“Click”的消息。
理想情况下，在达到阈值时应该调用回调。我没有看到这个被调用一次。注意：为了生成滚动，我添加了比示例中显示的更多的文本内容。
这是一个工作示例iron-scroll-threshold ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="bower_components/iron-scroll-threshold/iron-scroll-threshold.html">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body>
<test-component></test-component>
<dom-module id="test-component">
<template>
<style>
:host {
display: block;
height: 100%;
}
iron-scroll-threshold {
height: 100%;
overflow: auto;
}
</style>
<iron-ajax auto url= "{{url}}" last-response="{{response}}"></iron-ajax>
<iron-scroll-threshold id="mytras" on-lower-threshold="loadMoreData" lower-threshold="100" scroll-target="document">
<template is="dom-repeat" items="{{response.results}}">
<span> [[index]] : [[item.name.first]] [[item.name.last]]</span><br/><br/><br/>
</template>
</iron-scroll-threshold>
</template>
<script>
class MyTest extends Polymer.Element {
static get is() { return 'test-component'; }
static get properties() { return {
people:{
type:Number,
value:20
}
}};
static get observers() { return ['_url(people)']}
_url(p){
console.log(p);
this.url = "https://randomuser.me/api?results=" + p;
setTimeout(()=> {
this.$.mytras.clearTriggers();
},900)
}
loadMoreData (){
console.log("God call me for every scroll");
this.people += 10;
}
}
customElements.define(MyTest.is, MyTest);
</script>
</dom-module>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
