我正在使用Polymer构建一个全屏应用程序 . 目前,我已经定义了这样的布局:
<body unresolved class="fullbleed">
<template is="dom-bind" id="app">
<paper-scroll-header-panel fixed>
<paper-toolbar>
<div class="spacer title" style="margin-left:0px;">My App</div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</paper-toolbar>
<paper-drawer-panel id="paperDrawerPanel">
<div drawer>
<my-nav flex></my-nav>
</div>
<div main class="content">
<my-view></my-view>
</div>
</paper-drawer-panel>
</paper-scroll-header-panel>
</template>
</body>
<div main class="content">
中的视图如下所示:
my-view.html
<dom-module id="project-view">
<template>
<neon-animated-pages class="flex" selected="[[selectedPageIndex]]" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
<!-- Page 1 -->
<div>
<paper-header-panel mode="seamed">
<div class="paper-header">
<paper-toolbar class="view-toolbar">
<paper-icon-button icon="menu"></paper-icon-button>
<span class="flex"></span>
<paper-icon-button icon="menu"></paper-icon-button>
</paper-toolbar>
</div>
<div class="content">
<paper-material elevation="2">
<h1>Welcome</h1>
<p>
This will be a BIG text block that require scrolling. The toolbar should always be visible. The "paper" should scroll under the toolbar like a Google Doc
</p>
</paper-material>
</div>
</paper-header-panel>
</div>
<!-- Page 2 -->
<div>
<paper-material elevation="2">
<p>Another page</p>
</paper-material>
</div>
</neon-animated-pages>
<script>
Polymer({
is: "my-view",
ready: function() {
this.selectedPageIndex = 0;
}
});
</script>
</template>
</dom-module>
当我运行此页面时,工具栏下的内容将不会滚动 . 它保持固定的位置 . 我不懂为什么 . 如何在工具栏下创建一些纸张,以便它像Google Docs一样滚动到工具栏下方?
Update :
主要布局更改为:
<paper-header-panel class="flex" style="background-color:lightcoral;">
<paper-toolbar>
<div class="spacer title" style="margin-left:0px;">My App</div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</paper-toolbar>
<div class="flex content" style="background-color:lightsalmon;">
<div class="horizontal layout">
<div drawer>
<my-nav flex></my-nav>
</div>
<div main class="content">
<my-view></my-view>
</div>
</div>
</div>
</paper-header-panel>
内容滚动 . 但是,纸盒抽屉面板的内容不会填充工具栏下方的剩余区域 . 我不懂为什么 . 这就像铁 - 柔性布局的东西不起作用 . 我究竟做错了什么?
3 回答
我不确定这是否已经实现,但是这篇博文可能对您有所帮助,因为它明确提到了纸质工具栏以及flex布局:
https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/
所以你可以尝试使用mixins而不是flex-class .
尝试使用paper-dialog-scrollable . 您所要做的就是设置滚动区域的宽度和高度 . 适用于静态和动态内容 .
我的猜测是它与纸质卷轴 - 面板 - 面板元素内部的纸质抽屉面板有关 . 除了可能是罪魁祸首之外,您应该考虑如果您在纸卷轴 Headers 面板内部有纸质抽屉面板,它将与您的内容一起滚动 .
我会尝试移除或移动纸盒抽屉面板,然后在滚动工作后将其重新添加 .