[英]Polymer - content tag inside core-animated-pages doesn't take height
I have a list of elements and i want that each element will have 2 pages/2 views. 我有一个元素列表,我希望每个元素都有2页/ 2个视图。 Each element has a generic content ( <content></content>
). 每个元素都有一个通用内容( <content></content>
)。
The problem is that when i'm using core-animated-pages to wrap my generic content, my list of elements are one over each other. 问题是,当我使用核心动画页面包装通用内容时,元素列表彼此重叠。 I know that it is because the animated-pages converts my content position to absolute (and i don't want to change that) but why the element content doesn't get its child height in this case? 我知道这是因为动画页面将我的内容位置转换为绝对位置(并且我不想更改该位置),但是为什么在这种情况下元素内容没有达到其子高度?
I took the demo from the polymer site to demonstrate a bit better what i'm trying to accomplish here - 我把演示从聚合物现场演示好一点什么,我想在这里完成-
inside the post-card.html i inserted the core-animated-pages so that when i click on each element it will switch view to "NEXT PAGE!" 我在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>
You could use data-binding on the selected attribute inside the core-animated-pages tag 您可以在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;
}
}
})
If that isn't working you could try changing place on the on-tap attribute to the section tag. 如果这不起作用,您可以尝试将on-tap属性上的位置更改为section标记。 <section on-tap="{{togglePage}}"></section>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.