gpt4 book ai didi

javascript - 在 Polymer 2.0 中使用 iron-scroll-threshold 为 scroll-target = document 处理滚动

转载 作者:行者123 更新时间:2023-11-30 20:50:24 25 4
gpt4 key购买 nike

我正在尝试处理滚动阈值事件。使用以下代码行

<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>

on-lower-threshold 根本没有被调用。我使用文档作为滚动目标。组件正在按预期创建。也可以看到“点击”的消息。理想情况下,在达到阈值时应调用回调。我什至没有看到它被调用一次。注意:为了生成滚动条,我添加了比示例中显示的内容更多的文本内容。

最佳答案

这里是 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>&nbsp; [[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>

关于javascript - 在 Polymer 2.0 中使用 iron-scroll-threshold 为 scroll-target = document 处理滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48249791/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com