Polymer 铁卷轴门只开火一次
聚合物1* 我在Polymer的Polymer 铁卷轴门只开火一次,polymer,polymer-1.0,Polymer,Polymer 1.0,聚合物1* 我在Polymer的铁卷轴阈值方面没有太大成功。当我的应用程序首次加载时，我可以让它启动一次。在那之后，它将永远不会开火 我的顶部标题大约是400px。我的目标是当用户滚动距离顶部约200时，获得铁滚动阈值激发 有什么建议吗 <iron-scroll-threshold id="bar" upper-threshold="150" on-upper-threshold="scrollSnap"> <div class="vertical layout"
铁卷轴阈值方面没有太大成功。当我的应用程序首次加载时，我可以让它启动一次。在那之后，它将永远不会开火
我的顶部标题大约是400px。我的目标是当用户滚动距离顶部约200时，获得<代码>铁滚动阈值激发
有什么建议吗
<iron-scroll-threshold id="bar" upper-threshold="150" on-upper-threshold="scrollSnap">
<div class="vertical layout">
<div>
<div>
<h2 class="section-title">Portfolio</h2>
<p class$="[[activeTextSection(active)]] section-description">foo
</div>
<br>
<br>
<div class="layout horizontal center-center" hidden$="{{queryMatches}}">
<iron-icon class="small-icon" icon="build"></iron-icon>
<iron-icon class="small-icon" icon="cloud-circle"></iron-icon>
<iron-icon class="small-icon" icon="http"></iron-icon>
</div>
<div
class="layout horizontal center-center active-desktop-container"
hidden$="{{!queryMatches}}">
<iron-icon class$="[[activeIconSectIcon(active)]]" icon="build"></iron-icon>
<iron-icon class$="[[activeIconSectIcon(active)]]" icon="cloud-circle"></iron-icon>
<iron-icon class$="[[activeIconSectIcon(active)]]" icon="http"></iron-icon>
</div>
</div>
</div>
</iron-scroll-threshold>
文件夹
foo
聚合物({
是：“公文包页面”，
行为：[pageBehavior]，
scrollSnap：函数（e）{
控制台日志（e）；
此.$.bar.clearTriggers（）；
}
});
这里的完整代码是测试localhost的一个示例
<!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">-->
<iron-scroll-threshold id="mytras" upper-threshold="150"
on-upper-threshold="scrollSnap" scroll-target="document" on-lower-threshold="loadMoreData">
<template is="dom-repeat" items="{{response.results}}">
<span> [[index]] : [[item.name.first]] [[item.name.last]]</span<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;
}
}
scrollSnap() {
console.log('upper threshold');
setTimeout(()=> {
this.$.mytras.clearTriggers();
},900)
}
customElements.define(MyTest.is, MyTest);
</script>
</dom-module>
</body>
</html>
：主持人{
显示：块；
身高：100%；
}
铁卷轴阈值{
身高：100%；
溢出：自动；
}
[[index]]：[[item.name.first][[item.name.last]]{
这是$.mytras.clearTriggers（）；
},900)
}
loadMoreData（）{
日志（“上帝为每一个卷轴召唤我”）；
这个人+=10；
}
}
scrollSnap（）{
console.log（“上限阈值”）；
设置超时（（）=>{
这是$.mytras.clearTriggers（）；
},900)
}
customElements.define（MyTest.is，MyTest）；
您需要触发clearTriggers（）；页面大小更改后，请检查此工作示例是否仍不成功。我用clearTriggers（）更新了帖子（）我刚刚在上面的链接中用你的在upper threshold=“scrollSnap”
上测试了代码，当我添加scroll target=“document”
时，它正在工作，但请注意，当你的页面大小改变或clearTriggers（）时，这将触发更多的代码
已调用。对于滚动target=“document”
以太，我的系统没有运气。好的，只需创建一个控制器并使polymer init
尽可能简单地完成问题，或者按enter键，polymer将安装基本组件。删除index.html all并替换下面的代码后，需要安装“iron scroll threshold”（bower安装--保存聚合关系/iron scroll threshold），我将给出所有代码作为示例。所以，最后要在本地测试polymer service
<!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">-->
<iron-scroll-threshold id="mytras" upper-threshold="150"
on-upper-threshold="scrollSnap" scroll-target="document" on-lower-threshold="loadMoreData">
<template is="dom-repeat" items="{{response.results}}">
<span> [[index]] : [[item.name.first]] [[item.name.last]]</span<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;
}
}
scrollSnap() {
console.log('upper threshold');
setTimeout(()=> {
this.$.mytras.clearTriggers();
},900)
}
customElements.define(MyTest.is, MyTest);
</script>
</dom-module>
</body>
</html>