Question

聚合物1。*

我在Polymer iron-scroll-threshold上没有取得多大成功。当我的应用程序第一次加载时，我可以触发它。在那之后，它永远不会开火。

我的顶部标题大约是400px。我的目标是在用户从顶部滚动大约200时触发iron-scroll-threshold。

有什么建议吗？

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

 <script>
    Polymer({
      is: "portfolio-page",
      behaviors: [pageBehavior],
      scrollSnap: function(e) {
        console.log(e);
        this.$.bar.clearTriggers();
      }
    });
  </script>

Answer 1

这里的完整代码是一个测试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>&nbsp;[[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>

铁滚动阈值只发射一次

1 个答案: