首页 文章

聚合物布局 - 滚动内容

提问于
浏览
1

我正在使用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 回答

  • 0

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

    https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/

    所以你可以尝试使用mixins而不是flex-class .

  • 0

    尝试使用paper-dialog-scrollable . 您所要做的就是设置滚动区域的宽度和高度 . 适用于静态和动态内容 .

  • 0

    我的猜测是它与纸质卷轴 - 面板 - 面板元素内部的纸质抽屉面板有关 . 除了可能是罪魁祸首之外,您应该考虑如果您在纸卷轴 Headers 面板内部有纸质抽屉面板,它将与您的内容一起滚动 .

    我会尝试移除或移动纸盒抽屉面板,然后在滚动工作后将其重新添加 .

相关问题