Tabs 在选项卡和项目之间滑动,打开用户界面

Tabs 在选项卡和项目之间滑动,打开用户界面,tabs,swipe-gesture,onsen-ui,Tabs,Swipe Gesture,Onsen Ui,我使用的是onsen用户界面(v1.14),我试图在标签之间滑动,就像在facebook messenger上一样,但我无法让它工作 我曾尝试将“setActiveTab”功能与ons手势检测器结合使用,但都没有成功。以下是我所做的(针对工具栏) css html 您使用什么平台进行测试?我在Monaca Debugger for Android中使用了Cordoba。目前,Onsen UI 1.1.4不支持滑动开关标记。是否支持它?1.2我想还是不行。我用ons旋转木马和一些js做了类似的事情

我使用的是onsen用户界面(v1.14),我试图在标签之间滑动,就像在facebook messenger上一样,但我无法让它工作

我曾尝试将“setActiveTab”功能与ons手势检测器结合使用,但都没有成功。

以下是我所做的(针对工具栏)

css

html


您使用什么平台进行测试?我在Monaca Debugger for Android中使用了Cordoba。目前,Onsen UI 1.1.4不支持滑动开关标记。是否支持它?1.2我想还是不行。我用ons旋转木马和一些js做了类似的事情,以在刷卡时更新导航颜色
.activebtn .ng-scope{
color: blue;
}
<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>
    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);
    });