溫泉：旋轉木馬在標籤欄中的標籤間滑動

Question

我正在使用Onsen UI設置移動應用程序。 現在我有這樣的事情：

<ons-tabbar position="top" var="tabbar" modifier="top-border"> 
    <ons-tab active="true" class="center" page="cat1.html">cat1</ons-tab> 
    <ons-tab class="center" page="cat2.html">cat2</ons-tab>  
    <ons-tab class="center" page="cat3.html">cat3</ons-tab> 
</ons-tabbar> 

<!-- CATEGORY 1 -->  
<ons-template type="text/ons-template" id="cat1.html"> 
    <ons-carousel swipeable overscrollable auto-scroll> 
    <ons-carousel-item ng-repeat="i in [0,1,2]"> 
     <ons-list> 
     <ons-list-item ng-repeat="j in ['Americano','Espresso','Ristretto']"> 
      <ul><li>{{ j }}</li></ul> 
     </ons-list-item> 
     </ons-list> 
    </ons-carousel-item> 
    </ons-carousel> 
</ons-template> 

<!-- CATEGORY 2 -->  
<ons-template type="text/ons-template" id="cat2.html"> 
    <ons-carousel swipeable overscrollable auto-scroll> 
    <ons-carousel-item> 
     <ons-list> 
     <ons-list-item ng-repeat="j in ['Espresso','Ristretto','Doppio']"> 
      <ul><li>{{ j }}</li></ul> 
     </ons-list-item> 
     </ons-list> 
    </ons-carousel-item> 
    </ons-carousel> 
</ons-template> 

<!-- CATEGORY 3 -->  
<ons-template type="text/ons-template" id="cat3.html"> 
    <ons-carousel swipeable overscrollable auto-scroll> 
    <ons-carousel-item> 
     <ons-list> 
     <ons-list-item ng-repeat="j in ['Ristretto','Doppio','Espresso']"> 
      <ul><li>{{ j }}</li></ul> 
     </ons-list-item> 
     </ons-list> 
    </ons-carousel-item> 
    </ons-carousel> 
</ons-template> 

所以每次用戶點擊喜歡CAT1爲CAT1得到的數據顯示的TabBar選項卡上的時間。這工作很好。但我希望用戶能夠通過類別滑動。因此，如果我在cat1並且向左滑動，cat2必須顯示，並在上面的tabbar中變爲活動狀態。當我再次向左滑動或當我向右滑動時，cat1必須顯示並變爲活動狀態。

這是如何實現的？

Answer 1

您可以使用ons-postchange屬性指定「postchange」事件觸發時的自定義行爲（see documentation）。在這種情況下，行爲可能是更改tabbar活動選項卡，並且您可以使用setActiveTab(index, [options])（see documentation）執行此操作。