Проведите между элементами табуляции, onsen-ui

Question

Я использую onsen-ui (v1.14), и я пытаюсь провести между вкладками, например, на facebook messenger, но я не могу заставить его работать.

Я попытался использовать функцию setActiveTab с помощью ons-gesture-detector в нескольких комбинациях, но никто не работал.

Answer 1

Вот что я сделал (для панели инструментов)

CSS

.activebtn .ng-scope{ 
color: blue; 
} 

HTML

<ons-template id="list.html"> 
    <ons-toolbar var="tb"> 
     <div class="center"> 
     <ons-toolbar-button class="tbbtn" id="btn_0" ng-click="abc.setActiveCarouselItemIndex(0)">ALL</ons-toolbar-button> 
     <ons-toolbar-button class="tbbtn" id="btn_1" ng-click="abc.setActiveCarouselItemIndex(1)">PEOPLE</ons-toolbar-button> 
     <ons-toolbar-button class="tbbtn" id="btn_2" ng-click="abc.setActiveCarouselItemIndex(2)"> TOPICS</ons-toolbar-button> 
     <ons-toolbar-button class="tbbtn" id="btn_3" ng-click="abc.setActiveCarouselItemIndex(3)">ACCOUNTS</ons-toolbar-button> 
     </div> 
    </ons-toolbar> 


    <ons-carousel style="width: 100%; height: 100%" auto-scroll var="abc" ng-controller="ListCtrl"> 
     <ons-carousel-item> 
     a... 
     </ons-carousel-item> 
     <ons-carousel-item> 
     b... 
     </ons-carousel-item> 
     <ons-carousel-item> 
     c... 
     </ons-carousel-item> 
     <ons-carousel-item> 
     d... 
     </ons-carousel-item> 
     </ons-carousel> 
</ons-template> 

JS

app.controller('ListCtrl', function($scope, $http) { 

     $('#btn_0').addClass('activebtn'); 
     setTimeout(function(){ 
      abc.on('postchange', function(){ 
       $('.tbbtn ').removeClass('activebtn'); 
       $('#btn_' + abc.getActiveCarouselItemIndex()).addClass('activebtn'); 
      }); 
     }, 400); 
    });