Question

我正在尝试使用Polymer Designer构建一个包含脚手架的简单元素，其中包含一个菜单和一个core-animated-pages元素。但是我如何在元素内的部分之间转换？我在核心菜单的核心项目中使用on-tap =“{{tapOne}}”尝试了它。

Polymer({
  tapOne: function () {
    this.$.section1.selected
  },
  tapTwo: function () {
    this.$.section2.selected
  },
  tapThree: function () {
    this.$.section3.selected
  }
});

长话短说：它不起作用。有任何想法吗？对于noobism抱歉。

Answer 1

<core-animated-pages>延伸<core-selector>，关于选择所显示内容的大部分“魔力”都委托给<core-selector>。

使用扩展<core-selector>的内容可以通过几种不同的方式触发选择更改。在讨论<core-animated-pages>时最相关的是绑定到selected=属性并更改该值（在<core-animated-pages>的情况下，它需要选择页面的数字索引，从0），或使用selectPrevious() / selectNext()方法。

在"Building single page apps using web components"文章的<core-animated-pages>之间导航有一个非常彻底的概述。但是如果你想要快速破解的话，试试这个：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Polymer Demo</title>
  </head>
  
  <body>
    <script src="//www.polymer-project.org/webcomponents.min.js"></script>
    <link rel="import" href="//www.polymer-project.org/components/core-animated-pages/core-animated-pages.html">
    
    <polymer-element name="sample-element">
      <template>
        <div>
          <button on-tap="{{previousPage}}">Previous</button>
          Page <input value="{{selectedPageIndex}}"> (0-indexed)
          <button on-tap="{{nextPage}}">Next</button>
        </div>
        
        <core-animated-pages id="pages"
                             selected="{{selectedPageIndex}}">
          <section>
            <h1>First Page</h1>
            <p>Hello!</p>
          </section>
          <section>
            <h1>Second Page</h1>
            <p>Hi!</p>
          </section>
          <section>
            <h1>Third Page</h1>
            <p>Howdy!</p>
          </section>
        </core-animated-pages>
      </template>
      
      <script>
        Polymer({
          selectedPageIndex: 0,
          
          previousPage: function() {
            this.$.pages.selectPrevious(true);
          },
          
          nextPage: function() {
            this.$.pages.selectNext(true);
          }
        });
      </script>
    </polymer-element>
    
    <sample-element></sample-element>
  </body>
</html>

如何触发核心动画页面

1 个答案: