Question

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

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

我从聚合物网站上拿了the demo来证明我在这里要做的更好一点 -

在 post-card.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>

Answer 1

您可以对core-animated-pages标记内的所选属性使用数据绑定

<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;
        }
    }
})

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

聚合物 - 核心动画页面内的内容标签并不占用高度

1 个答案: