Пролистывание между элементами вкладок, onsen-ui

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

Я пробовал использовать функцию «setActiveTab» с детектором жестов в нескольких комбинациях, но ни одна из них не сработала.


tabs swipe-gesture onsen-ui
person Victor Fernandez    schedule 17.10.2014    source источник
comment
какую платформу вы используете для тестирования?   -  person Fiambre    schedule 20.10.2014
comment
Я использую Cordoba в Monaca Debugger для Android.   -  person Victor Fernandez    schedule 21.10.2014
comment
На данный момент тег переключения смахиванием не поддерживается в пользовательском интерфейсе Onsen 1.1.4.   -  person Ataru    schedule 27.10.2014
comment
есть идеи, будет ли он поддерживаться? 1.2 все еще не идет, я думаю.   -  person Will Bowman    schedule 29.11.2014
comment
я сделал что-то подобное с ons-carousel и некоторыми js, чтобы обновить цвета навигации при пролистывании   -  person Will Bowman    schedule 29.11.2014

Ответы (1)


arrow_upward
1
arrow_downward

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

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);
    });
person Will Bowman    schedule 29.11.2014