Question

最近我一直在努力适应Polymer的编程方式。我正在努力工作的自定义元素称为Iron-Scroll-Spy

有演示代码(demo/index.html)，如下所示：

<template is="dom-bind" id="scope">

  <paper-header-panel class="flex" id="headerPanel">
    <paper-toolbar>
      <paper-tabs selected="{{scrollSelected}}">
        <paper-tab>Section A</paper-tab>
        <paper-tab>Section B</paper-tab>
        <paper-tab>Section C</paper-tab>
        <paper-tab>Section D</paper-tab>
      </paper-tabs>
    </paper-toolbar>

    <iron-scroll-spy selected="{{scrollSelected}}" id="scrollSpy">
      <div>
        <h1>Section A</h1>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
      </div>
      <div>
        <h1>Section B</h1>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
      </div>
      <div>
        <h1>Section C</h1>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
      </div>
      <div>
        <h1>Section D</h1>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
      </div>
    </iron-scroll-spy>
  </paper-header-panel>

  <script>
    var scope = document.getElementById("scope");
    scope.$.scrollSpy.scrollTarget = scope.$.headerPanel.scroller;
  </script>

</template>

但是如何才能使代码在声明中工作？

如果我想将演示页面放到我自己的<custom-element>中，我该怎么办呢？比方说，我想让它成为<scroll-spy-app> ,,,

到目前为止我所得到的内容（内容未加载 - 无法正常工作）：

<dom-module id="scroll-spy-app">
<template>
    <style>
        body { margin: 0; height: 100vh; }
        iron-scroll-spy div { padding: 250px 100px; border-bottom: 1px solid grey; }
    </style>

      <paper-header-panel class="flex" id="headerPanel">
        <paper-toolbar>
          <paper-tabs selected="{{scrollSelected}}">
            <paper-tab>Section A</paper-tab>
            <paper-tab>Section B</paper-tab>
            <paper-tab>Section C</paper-tab>
            <paper-tab>Section D</paper-tab>
          </paper-tabs>
        </paper-toolbar>

        <iron-scroll-spy selected="{{scrollSelected}}" id="scrollSpy">
          <div class="scroll-spy">
            <h1>Section A</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
          <div class="scroll-spy">
            <h1>Section B</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
          <div class="scroll-spy">
            <h1>Section C</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
          <div class="scroll-spy">
            <h1>Section D</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
        </iron-scroll-spy>
      </paper-header-panel>

</template>

<script>
    Polymer({
      is: 'scroll-spy-app',

      properties: {
          scrollSelected: {
              type: Number,
              value: 0
          },
      },

      ready: function() {
        this.$.scrollSpy.scrollTarget = this.$.headerPanel.scroller;
      }
    });
</script>

</dom-module>

Answer 1

唉！......我其实一直都是这样。

下次，我只需要确保我的css { min-height: 0; }未设置为 ZERO ！

快速回答： (Fiddle)

<script>
    Polymer({
      is: 'scroll-spy-app',

      ready: function() {
        this.$.scrollSpy.scrollTarget = this.$.headerPanel.scroller;
      }
    });
</script>

陈述性方法（完整）：

<!--
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    Scroll Spy 
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->

<!-- Polymer -->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-scroll-spy/iron-scroll-spy.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">



<dom-module id="scroll-spy-app">
<template>
    <style>
        :host {
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -ms-flex-direction: column;
            -webkit-flex-direction: column;
            flex-direction: column;
            position: relative;
            height: 100%;
        }

        paper-header-panel { min-height: 100vh; }
        iron-scroll-spy div { min-height: 50vh; padding: 0 100px; border-bottom: 1px solid grey; }
    </style>

      <paper-header-panel id="headerPanel">

        <paper-toolbar>
          <paper-tabs selected="{{scrollSelected}}">
            <paper-tab>Section A</paper-tab>
            <paper-tab>Section B</paper-tab>
            <paper-tab>Section C</paper-tab>
            <paper-tab>Section D</paper-tab>
          </paper-tabs>
        </paper-toolbar>


        <iron-scroll-spy selected="{{scrollSelected}}" id="scrollSpy">
          <div>
            <h1>Section A</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
          <div>
            <h1>Section B</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
          <div>
            <h1>Section C</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
          <div>
            <h1>Section D</h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
          </div>
        </iron-scroll-spy>

      </paper-header-panel>

</template>

<script>
    Polymer({
      is: 'scroll-spy-app',

      ready: function() {
        this.$.scrollSpy.scrollTarget = this.$.headerPanel.scroller;
      }
    });
</script>

</dom-module>

添加自定义元素：

<scroll-spy-app></scroll-spy-app>

Polymer 1.0：如何使这个自定义元素声明？

但是如何才能使代码在声明中工作？

1 个答案: