Fatal编程技术网
  • javascript/
  • Javascript 在Polymer 2.0中为scroll target=document使用iron scroll threshold处理滚动

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

javascript polymer

Javascript 在Polymer 2.0中为scroll target=document使用iron scroll threshold处理滚动,javascript,polymer,Javascript,Polymer,我正在尝试处理滚动阈值事件。使用以下代码行 ：主持人{ 显示：块； } 铁卷轴阈值{ 显示：无； } 你好[[prop1]]！ XXXXXXX 更多行，直到滚动显示 /** *@customElement *@聚合物 */ 类DocumentscrollApp扩展了Polymer.Element{ 静态get是（）{return'documentscroll-app'；} 构造函数（）{ log（“调用构造函数”）； 超级（）； }//构造函数的结尾 静态获取属性（）{ 返回{ 建议1：{

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


：主持人{
显示：块；
}
铁卷轴阈值{
显示：无；
}
你好[[prop1]]！
XXXXXXX
更多行，直到滚动显示
/**
*@customElement
*@聚合物
*/
类DocumentscrollApp扩展了Polymer.Element{
静态get是（）{return'documentscroll-app'；}
构造函数（）{
log（“调用构造函数”）；
超级（）；
}//构造函数的结尾
静态获取属性（）{
返回{
建议1：{
类型：字符串，
值：“documentscroll应用程序”
}
};
}
loadMoreData（）
{
log（“加载更多数据”）；
这是$.scrollThreshold.clearTriggers（）；
}
就绪（）
{
log（“滚动对象已准备就绪”）；
super.ready（）；
this.addEventListener（'click'，this.\u onClick）；
}
_onClick（事件）{
log（“单击获取调用”）；
}
}
window.customElements.define（DocumentscrollApp.is，DocumentscrollApp）；

这里是
铁卷轴阈值的工作示例


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




：主持人{
显示：块；
身高：100%；
}
铁卷轴阈值{
身高：100%；
溢出：自动；
}
[[index]]：[[item.name.first][[item.name.last]]



MyTest类扩展了聚合物元素{
静态get是（）{return'test component'；}
静态获取属性（）{return{
人民:{
类型：数字，
价值：20
}       
}};
静态get Observators（）{return[''u url（people）]}
_网址（p）{
控制台日志（p）；
this.url=”https://randomuser.me/api?results=“+p；
设置超时（（）=>{
这是$.mytras.clearTriggers（）；
},900)
}
loadMoreData（）{
日志（“上帝为每一个卷轴召唤我”）；
这个人+=10；
}
}
customElements.define（MyTest.is，MyTest）；

Try
ironsrollteshhold.clearTriggers（）改为
此。$.scrollThreshold.clearTriggers（）并检查它是否在启动时触发
loadMoreData
。谢谢回复。尝试了这些更改后发现它们似乎不起作用。回拨甚至不会触发一次。如果您需要更多信息，请务必告诉我。谢谢您分享示例代码。除了dom名称之外，我使用了相同的名称。仍然没有触发任何事件，但是我可以看到正在检索的文本列表。还出现以下错误：“Uncaught TypeError:this.$.mytras.clearTriggers不是函数”无法找到适用于polymer的版本，请键入以下数字中的一个进行选择：1）polymer#~1.0.3，解析为1.0.9，是iron scroll threshold所需的#1.0.2 2）polymer#^2.0.0，解析为2.3.1，是scrollfinal所需的3）polymer#1.9-2，解析为2.3.1，是iron ajax所需的，请在选择之前加上前缀！要将其持久化到bower.json？回答2.3.1我在本地主机上测试和工作。您需要下载正确版本的组件。为此，如果您使用polymer ^2.0，当您遇到上述信息时，请选择最新版本（超过2.00）表示歉意。这是我的代码[链接]（）的链接，你能看一下吗？另外，$.mytras.clearTriggers（）抛出了未定义的错误。我认为
iron scroll threshold
Component未安装。确保它在我测试时正常工作。只需确保安装了head tag中列出的组件。甚至可以尝试在新目录下安装所有来自>polymer init的内容。（对不起，我可以通过手机连接。这就是我无法编辑您的代码笔代码的原因）