使用Polymer 2.0中的iron-scroll-threshold处理滚动目标= document

时间:2018-01-14 12:56:13

标签: javascript polymer

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

<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。我使用文档作为滚动目标。并且正在按预期创建组件。也可以看到“点击”的消息。 理想情况下,在达到阈值时,应调用回调。我甚至没有看到这个被调用过一次。注意:要生成滚动,我添加的文本内容多于示例中显示的内容。

1 个答案:

答案 0 :(得分:1)

这是find(byTitle的工作样本;

@IBAction func addTapped(_ sender: Any) {

    let myAppDelegate = UIApplication.shared.delegate as! AppDelegate
    let context = myAppDelegate.persistentContainer.viewContext
    guard let title = titleText.text, !title.isEmpty else { return }
    do {
        let dataThing = try find(byTitle:  title, in: context)
        dataThing.active = isActive.isOn
        dataThing.number = numberText.text ?? "NA"
        dataThing.note = noteText.text ?? "No Entry"
        try context.save()
        print ("CoreData: Game Saved!")
    }  catch {
        print ("Error Saving Data: \(error.localizedDescription)")
    }

    self.dismiss(animated: true, completion: nil)
}