Polymer 聚合物布局-滚动内容_Polymer

Polymer 聚合物布局-滚动内容

polymer

Polymer 聚合物布局-滚动内容,polymer,Polymer,我正在用聚合物构建一个全屏应用程序。目前，我的布局定义如下： <body unresolved class="fullbleed"> <template is="dom-bind" id="app"> <paper-scroll-header-panel fixed> <paper-toolbar> <div class="spacer title" style="margin-le

我正在用聚合物构建一个全屏应用程序。目前，我的布局定义如下：

  <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>


我的应用程序

中的视图如下所示：

  <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>

我的视图.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>


欢迎

这将是一个需要滚动的大文本块。工具栏应始终可见。“纸张”应该像谷歌文档一样在工具栏下滚动

另一页
聚合物({
是：“我的观点”，
就绪：函数（）{
this.selectedPageIndex=0；
}
});

当我运行此页面时，工具栏下的内容不会滚动。它保持固定的位置。我不明白为什么。如何在工具栏下创建一些纸张，使其像谷歌文档一样在工具栏下滚动

更新：

主布局更改为：

  <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>


我的应用程序

内容滚动。但是，纸盒面板的内容不会填充工具栏下方的剩余区域。我不明白为什么。这就像铁柔性布局的东西不起作用。我做错了什么？

我的猜测是，这与纸张卷轴标题面板元素中的纸盒面板有关。在这可能是罪魁祸首的情况下，你应该考虑如果你有纸抽屉面板内的纸卷轴头面板，它会滚动你的内容。

首先，我会尝试移除或移动纸盒面板，然后在滚动工作后将其重新添加。

我猜这与纸盒面板位于纸张滚动标题面板元素内有关。在这可能是罪魁祸首的情况下，你应该考虑如果你有纸抽屉面板内的纸卷轴头面板，它会滚动你的内容。

我会先尝试移除或移动纸盒面板，然后在您完成滚动后将其重新添加。

我不确定这是否已经实现，但这篇博客文章可能会对您有所帮助，因为它明确提到了纸张工具栏和flex布局：

因此，您可以尝试使用mixin而不是flex类

我不确定这是否已经实现，但这篇博文可能会对您有所帮助，因为它明确提到了纸质工具栏和flex布局：

因此，您可以尝试使用mixin而不是flex类

尝试使用可滚动的纸张对话框。您所要做的就是设置滚动区域的宽度和高度。可用于静态和动态内容。

如果您可以给我们一个JSFIDLE或其他方式来尝试代码，那么这将非常容易为您进行故障排除。如果您可以给我们一个JSFIDLE或其他方式来尝试代码，这将非常容易为您进行故障排除。我更新了布局（和上面的代码）就像你建议的那样。我觉得这让我更亲近了。然而，iron flex布局的东西似乎不起作用。我很困惑。我已经确认iron flex布局组件已导入。这太奇怪了。我按照你的建议更新了布局（和上面的代码）。我觉得这让我更亲近了。然而，iron flex布局的东西似乎不起作用。我很困惑。我已经确认iron flex布局组件已导入。这太奇怪了。