我正在使用Polymer来重新设计我的网站。我在将core-scroll-header-panel与core-toolbar结合使用时遇到了一些问题。
我的问题如下：我左边有一个core-drawer-panel，其中包含整个网站的菜单。在右边我有core-scroll-header-panel。现在，在某些页面上（在core-drawer-panel中选择）我想要显示一个高标题，而在其他页面上显示一个小标题。所以我需要一种方法来切换tall的{{1}} - 属性。
为此，我使用Polymer的data-binding来更改core-toolbar的类。不幸的是，这不适用，因为侧栏中的内容在更改课程后处于关闭位置。澄清一下：如果您将网站加载为core-toolbar tall，则右侧显示的内容会略微偏移到底部。将类更改为core-toolbar以外的其他类时，此偏移量仍然存在。反之亦然，你可以在这里看到一个有效的例子：http://jsbin.com/vepoyami/2/edit。在示例代码中，您可以将tall更改为if(this.page == "tall"){而不是small，以便在相反的情况下查看效果。这是代码：
tall据推测，这种切换状态的方式并不是一个好方法。在我所说的问题之上，当它处于小状态时，颜色没有被填充。
我在这里做错了什么，应该怎么做呢？
更新：我在github上提交了一个错误。一位合作者回复称，<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>
仍存在一些问题，即某些样式未重置，并且他们正在努力修复下一版本。
协作者还补充说，可以调用core-scroll-header-panel来重新评估内容的高度，如下面的Ümit's answer所示。
答案 0 :(得分：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();
});
见这里：
答案 1 :(得分：0)