如何通過點擊紙張選項卡來更改頁面內容？

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函數將會帶來不同的數據。我可以如何實現這一點？請

Answer 1

通過綁定paper-tabs的selected propertyry與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; 
} 

希望這有助於:)