如何通过点击纸张标签改变页面内容？

Question

我有像这样的纸签

​

<paper-dialog id="view">  
  <paper-tabs selected="0">
    <paper-tab on-tap="_changeList">TAB 1</paper-tab>
    <paper-tab on-tap="_changeList">TAB 2</paper-tab>
    <paper-tab on-tap="_changeList">TAB 3</paper-tab>
  </paper-tabs>
  <iron-list>some story for tab 1</iron-list>
  <iron-list>some story for tab 2</iron-list>
  <iron-list>some story for tab 3</iron-list>
 </paper-dialog>

​

我对每个标签都有不同的铁表。第一个选项卡将被选中，但由于用户将单击其他选项卡，因此内容应该更改所选选项卡。_changeList函数将带来不同的数据，.How能实现这一点吗？请

Answer 1

通过将paper-tabs的selected属性与iron-pages的selected属性绑定，将显示基于所选选项卡的相关性。

<paper-dialog id="view">
   <paper-tabs selected="{{currentPage}}">
      <paper-tab on-tap="_changeList">TAB 1</paper-tab>
      <paper-tab on-tap="_changeList">TAB 2</paper-tab>
      <paper-tab on-tap="_changeList">TAB 3</paper-tab>
   </paper-tabs>
   <iron-pages selected="{{currentPage}}">
      <iron-list>some story for tab 1</iron-list>
      <iron-list>some story for tab 2</iron-list>
      <iron-list>some story for tab 3</iron-list>
   </iron-pages>
</paper-dialog>

由于您希望通过defalut显示第一个选项卡，因此需要将currentPage值设置为0。

ready: function(){
    this.currentPage = 0;
}

希望这会有所帮助:)