3

我想显示当前所选页面的数量和铁页中所有页面的数量（例如“第 1 页，共 100 页”）。

获得前者很容易，因为您可以查找selected-changed事件。对于后者，我不知道如何获得它。我正在考虑在 中获取子元素的数量iron-pages，但这似乎并不可靠。

4

1 回答 1

2

您可以做的是确保每个页面都有一个相应的数字作为属性。您可以通过评估子元素（忽略后备页面）来获取页面数。

一个工作示例：

<!DOCTYPE html>
<html>

<head>
    <base href="//polygit.org/components/">
    <script src="webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="polymer/polymer.html">

    <link rel="import" href="iron-pages/iron-pages.html">


    <dom-module id="example-component">
        <template>
            <style>
                :host {
                    display: block
                }
            </style>

            <input value="{{pageName::input}}" placeholder="Type a page name here.">

            <iron-pages id="ironPages" selected="[[pageName]]" attr-for-selected="page-number" fallback-selection="fallback">
                <div page-number="1">One</div>
                <div page-number="2">Two</div>
                <div page-number="3">Three</div>
                <div page-number="fallback">
                    Change pages by typing '1', '2', or '3' in the input above.
                </div>
            </iron-pages>

            <div id="pageNumbering">Page [[currentPage]] of [[totalPages]]</div>

        </template>

        <script>
            class ExampleComponent extends Polymer.Element {
                static get is() {
                    return 'example-component';
                }
                static get properties() {
                    return {
                        currentPage: {
                            type: Number,
                            value: 0,
                        },
                        totalPages: {
                            type: Number,
                            value: 0,
                        }
                    };
                }

                connectedCallback() {
                    super.connectedCallback();
                    // fallback doesn't count
                    this.totalPages = this.$.ironPages.children.length - 1;
                    this.addEventListener('iron-select', this._onPageChanged);
                }

                _onPageChanged() {
                    let currentPage = this.$.ironPages.selectedItem.getAttribute('page-number');

                    if (currentPage == "fallback") {
                        this.$.pageNumbering.hidden = true;
                    }

                    if (currentPage <= this.totalPages) {
                        currentPage = parseInt(currentPage);
                        this.set('currentPage', currentPage);
                        this.$.pageNumbering.hidden = false;
                    }
                }

            }

            customElements.define(ExampleComponent.is, ExampleComponent);
        </script>
    </dom-module>

</head>

<body>
    <example-component></example-component>
</body>

</html>

于 2017-12-02T21:26:49.827 回答