Question

我想将core-scroll-header-panel与core-list一起使用，以便在滚动列表时，标题会缩小并消失。特别是对于移动而言，将最大化列表的空间。我拿了demo并尝试将其改编为核心列表，但未能让它滚动页面上的标题。我的尝试是http://jsbin.com/sivuvu

任何帮助表示感谢。

Answer 1

这是一个可能的解决方案：

＆＃13;

<!doctype html>
<html>
  <head>
    <script src="https://www.polymer-project.org/0.5/webcomponents.min.js"></script>
    <link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
    <link rel="import" href="https://www.polymer-project.org/0.5/components/core-scroll-header-panel/core-scroll-header-panel.html">
    <link rel="import" href="https://www.polymer-project.org/0.5/components/core-list/core-list.html">
    <link rel="import" href="https://www.polymer-project.org/0.5/components/core-header-panel/core-header-panel.html">
    <link rel="import" href="https://www.polymer-project.org/0.5/components/core-toolbar/core-toolbar.html">
    <link rel="import" href="https://www.polymer-project.org/0.5/components/core-icon-button/core-icon-button.html">

    <style shim-shadowdom>
      body {
        font-family: sans-serif;
        color: #333;
      }

      /* background for toolbar when it is at its full size */
      core-scroll-header-panel::shadow #headerBg {
        background-image: url(https://www.polymer-project.org/0.5/components/core-scroll-header-panel/demos/images/bg9.jpg);
      }

      /* background for toolbar when it is condensed */
      core-scroll-header-panel::shadow #condensedHeaderBg {
        background-color: #f4b400;
      }

      core-toolbar {
        color: #f1f1f1;
        fill: #f1f1f1;
        background-color: transparent;
      }

      .title {
        -webkit-transform-origin: 0;
        transform-origin: 0;
        font-size: 40px;
      }

      .content {
        padding: 8px;
        background-color: #eee;
      }
      
      core-list {
        border: solid 1px red;
        margin: 10px;
        overflow: hidden;
      }
      
      div.foo, core-list {
        border: solid 1px blue;
        margin: 10px;
      }
      
      div.row {
        height: 80px;
        border: solid 1px green;
        margin: 3px;
        text-align: center;
      }
    </style>
  </head>

  <body unresolved fullbleed>
    <template is="auto-binding" id="page-template">
      <core-scroll-header-panel condenses fit>
        <core-toolbar class="tall">
          <core-icon-button icon="arrow-back"></core-icon-button>
          <div flex></div>
          <core-icon-button icon="search"></core-icon-button>
          <core-icon-button icon="more-vert"></core-icon-button>
          <div class="bottom indent title">Title</div>
        </core-toolbar>
        <div class="content" flex>
          <core-list data="{{data}}" flex>
            <template>
              <div class="row">
                List row: {{index}}, User data from model: {{model.name}}
              </div>
            </template>
          </core-list>
        </div>
      </core-scroll-header-panel>
    </template>
    
    <script>
      var t = document.querySelector('#page-template');
      t.data = [];
      for (i = 0; i < 30; i++) {
        t.data.push({name: 'Bob'});
      }
      
      t.addEventListener('template-bound', function() {
        // custom transformation: scale header's title
        var titleStyle = document.querySelector('.title').style;
        addEventListener('core-header-transform', function(e) {
          var d = e.detail;
          var m = d.height - d.condensedHeight;
          var scale = Math.max(0.75, (m - d.y) / (m / 0.25)  + 0.75);
          titleStyle.transform = titleStyle.webkitTransform =
              'scale(' + scale + ') translateZ(0)';
        });
      });
    </script>
  </body>
</html>

＆＃13;

我对您的代码进行了一些更改：我将其作为主页的一部分包含在内，而不是将<core-list>包装在自定义的Polymer元素定义中，但页面本身为wrapped in <template is="auto-binding"> ，使您可以访问自定义元素获得的所有相同模板语法糖。另一件事是在overflow: hidden上设置<core-list>，并依赖<core-scroll-header-panel>滚动条来滚动列表的内容。

如何使用core-scroll-header-panel和core-list

1 个答案: