核心动画页面中的聚合物内容标签不会;t测量高度

Polymer - content tag inside core-animated-pages doesn't take height

本文关键字：标签 高度 测量 动画 聚合物 核心      更新时间：2024-03-14

我有一个元素列表，我希望每个元素都有2个页面/2个视图。每个元素都有一个通用内容（<content></content>）。

问题是，当我使用核心动画页面来包装我的通用内容时，我的元素列表是一个接一个的。我知道这是因为动画页面将我的内容位置转换为绝对位置（我不想改变这一点），但为什么在这种情况下元素内容没有达到其子级高度

我从聚合物网站上进行了演示，以更好地展示我在这里试图实现的目标——

在明信片.html中，我插入了核心动画页面，这样当我点击每个元素时，它就会将视图切换到"下一页！"

    <core-animated-pages id="p" on-tap="{{togglePage}}" transitions="cross-fade-all">
    <section>
    <div class="card-header" layout horizontal center>
      <content select="img"></content>
      <content select="h2"></content>
    </div>
    <core-icon-button
      id="favicon"
      icon="favorite"
      on-tap="{{favoriteTapped}}">
    </core-icon-button>
    <content></content>
    </section>
    <section>
      <p>NEXT PAGE!</p>
    </section>
    </core-animated-pages>
    </template> 
  <script>
   Polymer ({
    publish: {
      favorite: {
        value: false,
        reflect: true
      }
    },
    favoriteTapped: function(event, detail, sender) {
      this.favorite = !this.favorite;
      this.fire('favorite-tap');
    },
    togglePage: function () {
      var max = 1;
      if (this.$.p.selected === max) {
        this.$.p.selected -= 1;
      } else {
        this.$.p.selected += 1;
      }
    }
  });
  </script>

您可以在核心动画页面标签内的选定属性上使用数据绑定

<core-animated-pages 
    id="p" 
    on-tap="{{togglePage}}" 
    transitions="cross-fade-all"
    selected="{{mySelected}}"
>
<script>
Polymer({
    mySelected: 0, //default value
    togglePage: function(){
        var max = 1;
        if (this.$.p.selected === max) {
            this.mySelected -= 1;
        } else {
            this.mySelected += 1;
        }
    }
})

如果不起作用，您可以尝试将点击属性上的位置更改为部分标记。<section on-tap="{{togglePage}}"></section>

相关文章：