单击按钮更改 iron-pages 选定值

Question

我正在使用 Polymer Starter Kit 作为这个项目的基础。

我正在尝试制作两个按钮，将用户带到 iron-page 元素内的下一页和上一页。

<iron-pages selected="0">
                <div>
                    <paper-material elevation="1">
                        <paper-radio-group class="layout vertical" selected="1">
                            <paper-radio-button name="1">1</paper-radio-button>
                            <paper-radio-button name="2">2</paper-radio-button>
                            <paper-radio-button name="3">3</paper-radio-button>
                        </paper-radio-group>
                    </paper-material>
                    <div class="horizontal justified layout">
                        <div>
                            <paper-button raised>Previous</paper-button>
                        </div>
                        <div>
                            <paper-button raised>Next</paper-button>
                        </div>
                    </div>
                </div>
                <div>Page 2</div>
                <div>Page 3</div>
                </iron-pages>

可能值得注意的是，此铁页元素位于初学者工具包用于处理菜单项的铁页元素内。

我尝试了很多方法来完成这项工作。我尝试将 div 更改为 "sections" 并使用入门工具包用于带有数据路由的菜单的相同方法，但我无法让它工作。我还尝试在脚本文件中创建一个函数来侦听单击事件，但它在错误的 iron-page 元素中更改了页面。它跳转到菜单中的下一页。

是否可以让 "Next" 按钮以某种方式将所选值更改为“2”？

Answer 1

这里是你如何做到的。为您的 iron-pages 组件和按钮指定一个 ID，以便以后轻松找到它们。

<iron-pages id="pages" selected="0">

    <paper-button raised id="next">Next</paper-button>

定义事件处理程序并通过 id 引用 iron-pages。然后你可以设置 selected 为你想跳转到的页码（从 0 开始）或调用 selectedNext() 跳转到下一页。

<script>
    var pages = document.querySelector("#pages");
    var next = document.querySelector("#next");
    next.addEventListener("click", function(){
        // choose an option here
        pages.selectNext();
        pages.selected = 2;
        pages.selected = pages.selected +1;  
     });
</script>

编辑如果您使用的是初学者工具包的结构，您可以尝试将按钮单击处理程序添加到 dom-change 回调中。

app.addEventListener('dom-change', function() {
    console.log('Our app is ready to rock!');

    var pages = document.querySelector("#pages");
    var next = document.querySelector("#next");
    next.addEventListener("click", function(){
        // choose an option here
        pages.selectNext();
        pages.selected = 2;
        pages.selected = pages.selected +1;  
     });
});

Answer 2

初学者工具包使用 page.js 进行路由。另一种选择是添加到新页面的路由，然后调用 page.show(relative-url-to-new-page)。通过url传递参数没有问题。它还适用于浏览器历史记录。

单击按钮更改 iron-pages 选定值

Change iron-pages selected value on button click

html

polymer

polymer-1.0