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的数据。这很有效。但我希望用户能够轻扫这些类别。因此，如果我在cat1并且我向左滑动cat2必须被显示并且也在上面的tabbar中变为活动状态。当我再次向左滑动或滑动到右侧cat1时，必须显示并激活。

如何实现这一目标？

Answer 1

您可以使用ons-postchange属性在触发“postchange”事件时指定自定义行为（see documentation）。在这种情况下，行为是更改标签栏活动标签，您可以使用setActiveTab(index, [options])（see documentation）执行此操作。

温泉：在tabbar中的选项卡之间滑动轮播

1 个答案: