javascript - polymer 将核心工具栏从高改为正常

Question

我正在使用Polymer重新设计我的网站。我在实现 core-scroll-header-panel 时遇到一些问题与 core-toolbar 结合使用.

我的问题如下:我有一个 core-drawer-panel左侧包含整个网站的菜单。右侧有 core-scroll-header-panel。现在，在某些页面(在 core-drawer-panel 中选择)上，我想显示一个高标题，而在其他页面上显示一个小标题。因此，我需要一种方法来切换 core-toolbar 的 tall 属性。

为此，我使用了 Polymer 的 data-binding只需更改 core-toolbar 的类。不幸的是，这并不能充分发挥作用，因为更改类别后侧边栏中的内容已偏离位置。澄清一下:如果您将网站加载为 tall core-toolbar，则右侧显示的内容都会向底部稍微偏移。当将类更改为 tall 以外的其他内容时，此偏移量仍然存在。反之亦然，您可以在这里看到一个工作示例:http://jsbin.com/vepoyami/2/edit 。示例代码中您可以将 if(this.page == "tall"){ 改为 small 而不是 tall 来查看效果如果是相反的话。代码如下:

<polymer-element name="my-app">
  <template>
    <style>
      core-toolbar#navheader{
        background-color: #99182c;
        color: white;
      }
      core-toolbar#mainheader{
        color: white;
        fill: white;
        background-color: transparent;
      }
      core-drawer-panel:not([narrow]) #navicon{
        display: none;
      }
      core-scroll-header-panel::shadow #headerBg {
        background-image: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg);
      }
      core-scroll-header-panel::shadow #condensedHeaderBg {
        background-color: #99182c;
      }
      core-header-panel#drawer{
        background-color: white;
      }
      paper-item.core-selected:not(.noColor){
        color: #99182c;
        fill: #99182c;
      }
      .big-container{
        display:block;
        position: relative;
        background-color: white;
        padding: 20px;
        margin: 10px;
      }
    </style>

    <core-drawer-panel id="drawerPanel">
      <core-header-panel drawer id="drawer" mode="seamed">
        <core-toolbar id="navheader">
          <span>Main Title</span>
        </core-toolbar>

        <core-menu selected="{{page}}" valueattr="id" selectedItem="{{pageItem}}">
          <paper-item icon="home" label="Small" id="small"></paper-item>
          <paper-item icon="today" label="Tall" id="tall"></paper-item>
        </core-menu>
      </core-header-panel>

      <core-scroll-header-panel main condenses="true" id="headerPanel" keepCondensedHeader>

        <core-toolbar class="{{mainheaderClass}}" id="mainheader">
          <paper-icon-button id="navicon" icon="menu" on-tap="{{nav}}"></paper-icon-button>
          <paper-icon-button id="back" icon="arrow-back"></paper-icon-button>
          <div flex></div>
          <paper-menu-button icon="more-vert" halign="right">
            Nothing yet!
          </paper-menu-button>
          <div class="bottom indent title">{{pageItem.label}}</div>
        </core-toolbar>

        <div class="content">
          <core-animated-pages selected="{{page}}" transitions="cross-fade-all" class="main" valueattr="id"> <!-- class main needed? -->
            <section id="small">
              <div class="big-container">
                The header should be a small one that stays there.
                <lorem-ipsum paragraphs="100"></lorem-ipsum>
              </div>
            </section>
            <section id="tall">
              <div class="big-container">
                The header should be a tall one that scrolls down into a small one and stays there.
                <lorem-ipsum paragraphs="100"></lorem-ipsum>
              </div>
            </section>
          </core-animated-pages>
        </div>

        </core-header-panel>

      </core-scroll-drawer-panel>
  </template>
  <script>
    Polymer('my-app', {
      ready: function(){
        this.page = 'tall';
      },
      pageChanged: function(){
        if(this.page == "tall"){
          this.mainheaderClass = "tall"
        }else{
          this.mainheaderClass = "";    
        }
      },
      nav: function(){
        this.$.drawerPanel.togglePanel();
      }
    });
  </script>
</polymer-element>

大概这种切换状态的方式不是一个好方法。除了我所说的问题之外，当它处于小状态时，颜色不会被填充。

我在这里做错了什么，应该如何做？

更新:我在 github 上提交了一个错误。一位合作者回复说，core-scroll-header-panel 仍然存在某些样式未重置的问题，他们正在努力修复问题，希望在下一个版本中修复。

合作者还补充说，可以调用.measureHeaderHeight()来重新评估内容的高度，正如 Ümit's answer 已经指出的那样。下面。

Answer 1

您的代码存在几个问题:

1.) 您的 HTML 结构中似乎存在一些错误:

您使用了core-scroll-header-panel，但使用了错误的结束标记(core-header-panel)

2.) 您确定要使用 core-scroll-header-panel 而不是 core-header-panel。这是如果您使用 core-header-panel 而不是 core-scroll-header-panel 的样子？

http://jsbin.com/vepoyami/4/edit?html,output

3.) 如果您使用core-scroll-header-panel，您可能必须重新计算标题高度。代码文档是这样说的:

/**
   * The height of the header when it is at its full size.
   *
   * By default, the height will be measured when it is ready.  If the height
   * changes later the user needs to either set this value to reflect the
   * new height or invoke `measureHeaderHeight()`.
   *
   * @attribute headerHeight
   * @type number
 */
    headerHeight: 0,

您需要将其添加到您的 pageChanged 回调中:

this.async(function() {
    this.$.headerPanel.measureHeaderHeight();
});

请参见此处:

http://jsbin.com/vepoyami/7/edit?html,output