获取铁页中的页数
[英]Get the number of pages in iron-pages
问题描述
I'd like to show the number of the currently selected page and number of all pages in iron-pages (eg "page 1 of 100"). 
我想显示当前所选页面的编号和铁页中所有页面的编号（例如“第1页，共100页”）。
Getting the former is easy as you can look for the selected-changed event. 获得前者很简单，因为您可以查找selected-changed事件。 For the latter I have no idea how to get it. 对于后者我不知道如何得到它。 I was considering getting the number of child elements in iron-pages , but that doesn't seem to be reliable. 我正在考虑在iron-pages获取子元素的数量，但这似乎并不可靠。
1 个解决方案
解决方案1
2 已采纳 2017-12-02 21:26:49
What you can do is make sure every page has a corresponding number as attribute. 你可以做的是确保每个页面都有一个相应的数字作为属性。 You can get the number of pages by evaluating child elements (ignoring the fallback page). 您可以通过评估子元素来获取页面数（忽略后备页面）。
A working example: 一个工作的例子：
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.