css – Polymer：我在core-animated-pages元素中没有渲染我的核心列表

当我的自定义元素在core-animated-pages中时,我有一个core-list元素的渲染问题(没有渲染)

这是一个jsfiddle工作时(灰名单)==>专辑网格外核心动画页面
 http://jsfiddle.net/flagadajones/yq30u78d/

当id不起作用时,这里是一个jsfiddle(没有灰名单)==>专辑网格内核心动画页面
 http://jsfiddle.net/flagadajones/m87sd0x3/2//

你能帮我谢谢吗

这是我的代码：

<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js">
  </script>

  <link href="https://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-icons/core-icons.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-icon-button/core-icon-button.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-toolbar/core-toolbar.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-list/core-list.html" rel="import" >

  <style>
   html,body {
      margin: 0;
      -webkit-tap-highlight-color: transparent;
      overflow: hidden;
    }
      remote-app{ 
      display: block;
      height: 100%;
      margin: 0 auto;
    }

  </style>
  </head>
  <body fit>
    <remote-app ></remote-app>


<polymer-element name="album-detail" attributes="album" layout vertical>
  <template>
    <style>
      #details {
        width: 740px;
        margin: auto;
        height: 100%;
        Box-shadow: 0 27px 24px 0 rgba(0,0.6);
        poosition:relative;
      }
      .mycard {
        height: 540px;
        border-radius: 3px;
        text-align: start;
        overflow: hidden;
        background: #fff;
        Box-shadow: 0 6px 20px 0 rgba(0,0.19);
      }
      .card-left {
        width: 200px;
        height: 200px;
        background-color:blue;
      }

      .btn{
        background-color:red;
        height:63px;
      }
      .title{
        background-color:yellow;
        color:black;
      }
      .info{
        height:200px
      }
      .item{
        height:48px;
        color:black;
        background-color:grey;
      }
    </style>
    <section id="details" class="details" >

      <div class="mycard " layout vertical>
        <div layout horizontal>
          <div class="card-left" ></div>
          <div  flex auto-horizontal layout vertical class="info">
            <div layout vertical flex class="title">
              <div flex auto>title</div>
              <div flex  auto>title2</div>
            </div>
            <div layout horizontal >
              <a  flex class="btn">aaa</a>
              <a flex  class="btn">bbb</a>
              <a flex class="btn">ccc</a>
            </div>
          </div>
        </div>
        <core-list id="list3" data="{{album.pistes}}" height="48" flex>
          <template>
            <div layout horizontal  class="item" center>
              <div>{{index}} toto {{model.name}}</div>
            </div>
          </template>
        </core-list>
      </div>
    </section>

  </template>
  <script>
    polymer({

    });
  </script>
</polymer-element>


<polymer-element name="remote-app" layout vertical>

  <template>
    <style>

      [drawer] {
        background-color: #B99588;
        border-right: 1px solid #ccc;
      }
      [main] {
        background-color: #4F7DC9;
        height:100%;
      }
      :host {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .album-grid {
        display: block;
        height: 100%;
        width: 100%;
        margin: 0 auto;
      }
      #pages {
        display: block;
        height: 100%;
        margin: 0 auto;
      }
       .item{
        height:48px;
        color:black;
        background-color:grey;
      }
    </style>
    <core-drawer-panel>
      <div drawer>
      </div>
      <div main>
        <album-detail album="{{ele}}" flex/>
        <!--core-animated-pages id="pages" selected="0" >
            <album-detail  album="{{ele}}" />
        </core-animated-pages-->
      </div>
    </core-drawer-panel>
  </template>
  <script>
    polymer({
    ele:{pistes:[{name:"1"},{name:"2"},{name:"3"},{name:"4"}]}
    }
           );
  </script>
</polymer-element>

解决方法

Kevin Schaaf帮助我解决了这个问题.请看这 thread.

请注意,您首先需要从凉亭获得最新版本的polymer(目前为5.2).然后转到core-animated-pages.html并找到这段代码 –

if (!oldItem) {
    this.applySelection(this.selectedItem,true);
    return;
}

现在添加this.async(this.notifyResize);申请后选择 –

if (!oldItem) {
    this.applySelection(this.selectedItem,true);
    this.async(this.notifyResize);
    return;
}

而已！您的代码应该在不调用updateSize或任何其他技巧的情况下工作.

我认为在5.2之后,这个修复程序将被包含在包中,因此您不需要这样做.但就目前而言,这只是你需要做的简单改变.

原文地址：https://www.jb51.cc/css/215703.html

css – Polymer：我在core-animated-pages元素中没有渲染我的核心列表

解决方法

相关推荐