Question

在core-(animated)-pages集合中，我需要我选择的页面对它成为选定页面的事实作出反应。我无法弄清楚要抓住哪个事件。尝试了一个简单的load但是没有被调用。

如果默认情况下没有此类事件，on-core-select可能会以某种方式触发my-element中的事件，让它知道它应该加载它的数据吗？

            <core-animated-pages id="appPages" selected="{{selectedPage}}" valueattr="data-name" transitions="slide-from-right" on-core-select="{{pageSelected}}">
                <my-page data-name="Round 1" color="red">
                    <div>Page 1</div>
                </my-page>
                <my-page data-name="Round 2" color="yellow">
                    <div>Page 2</div>
                </my-page>
                <my-page data-name="Round 3" color="grey">
                    <div>Page 3</div>
                </my-page>
            </core-animated-pages>



<polymer-element name="my-page" attributes="color">
<template>
    <section data-name="Round 1" layout vertical center center-justified style="background:{{color}};">
        <content></content>
    </section>
</template>
<script>
    Polymer('my-page', {
        load: function (e) {
            console.info(e)
        }
    });
</script>

Answer 1

基于核心动画页面文档（https://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages），该元素获取转换名称并查找包含相同单词的元素。例如：

<core-animated-pages transitions="hero-transition">
   <section id="page1">
     <div id="hero1" hero-id="hero" hero></div>
   </section>
   <section id="page2">
      <div id="hero2" hero-id="hero" hero></div>
  </section>
</core-animated-pages>

这可以帮助您避免编写逻辑来显示/隐藏您的元素。文档还显示在转换发生之前和之后触发的事件。

Answer 2

似乎有两个事件在不同时间被触发：

core-animated-pages-transition-prepare和
core-animated-pages-transition-end。

来自https://github.com/Polymer/core-animated-pages：

<!--
  Fired before a page transition occurs. Both pages involved in the transition are visible when
  this event fires. This is useful if there is something the client needs to do when a page becomes visible.

  @event core-animated-pages-transition-prepare
-->

<!--
  Fired when a page transition completes.

  @event core-animated-pages-transition-end
-->

使用核心页面，是否有页面加载的事件？

2 个答案: