Handling scrolling using iron-scroll-threshold in Polymer 2.0 for scroll-target = document

后端未结

关注

 1  1530

攒了一身酷

I am trying to handle scroll threshold events. Using following lines of code

相关标签:

1条回答

后悔当初

2021-01-24 16:23

Here a working sample for 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>

0 讨论(0)

热议问题