Сменные вкладки с использованием углового материала

Question

Сменные вкладки с использованием углового материала

0

Я хочу создать вкладки, которые можно прокрутить, поместив их содержимое. Чтобы быть конкретным, когда я сажусь прямо на содержимое вкладки (тело), я хочу, чтобы отображалось предыдущее содержимое вкладки. Это похоже на то, что доступно в Whatsapp для перехода между тремя вкладками: вызовами, чатами и контактами.

Я хочу реализовать это с помощью модуля углового материала. Я знаю о md-swipe-left и md-swipe-right. Но как мне изменить тело вкладок? Какие-либо предложения??

Sohan Shirodkar 28 янв. 2016, в 18:29

Источник

Теги:

javascript

angularjs

2 ответа

0

использовать md-selected атрибут md-tabs

HTML

<md-tabs class="md-accent" md-selected="selectedIndex" md-swipe-left="changeTab(1)" md-swipe-right="changeTab(0)">

контроллер

$scope.selectedIndex = 0;
$scope.changeTab = function(tab_){
    $scope.selectedIndex = tab_;
}

Sandeep 28 янв. 2016, в 16:12

0

Если я не ошибаюсь, вы рассматриваете только две вкладки, 0 и 1. Я прав?
Sohan Shirodkar 28 янв. 2016, в 17:43
0

да. но если у вас несколько вкладок, используйте md-swipe в <md-tab-body> и увеличивайте и уменьшайте значение параметра функции changeTab
Sandeep 28 янв. 2016, в 19:03
0

Большое спасибо!! Это было достаточно просто.
Sohan Shirodkar 29 янв. 2016, в 05:44

Показать ещё 1 комментарий

Ещё вопросы

Если я не ошибаюсь, вы рассматриваете только две вкладки, 0 и 1. Я прав?
да. но если у вас несколько вкладок, используйте md-swipe в <md-tab-body> и увеличивайте и уменьшайте значение параметра функции changeTab
Большое спасибо!! Это было достаточно просто.

Sohan Shirodkar · Accepted Answer · 2016-01-29T04-11-00.000Z

В этом и заключается суть ответа:

    $scope.onSwipeRight = function(tab_num){
        if( tab_num < 0){
            return;
        }
        $scope.selectedIndex = tab_num;   
    }

    $scope.onSwipeLeft = function(tab_num){
        if( tab_num > l){
        //l is number of tabs I have
            return;
        }
        $scope.selectedIndex = tab_num;        
    }

Затем используйте md-swipe-left = "onSwipeLeft (selectedIndex + 1)" и md-swipe-right = "onSwipeRight (selectedIndex-1)" в директиве md-tabs.

Это все, что вам нужно!