Как добавить салфетки для изменения между вкладками

Question

Я работаю над проектом мобильного приложения html5. Я обнаружил, что Onsen ui очень полезен и начал работать над It.

Теперь я хочу, чтобы красть между вкладками, как родной андроид UI .please помочь

Я сделал вкладку, как это

<ons-tabbar position="top" > 
    <ons-tab page="page1.html" label="Mobile" active="true"></ons-tab> 
    <ons-tab page="page2.html" label="DTH"></ons-tab> 
    <ons-tab page="page3.html" label="Datacard"></ons-tab> 
</ons-tabbar> 

Но как добавить салфетки, чтобы переключаться между вкладками.

Answer 1

В пользовательском интерфейсе Onsen нет этой функции. Он включает библиотеку Hammer для обнаружения жестов, поэтому вы можете прослушивать события события drag и переключаться, когда пользователь перетаскивает влево и вправо.

Что-то вроде этого:

document.addEventListener('ons-tabbar:init', function(event) { 
    var tabbar = event.component, 
     el = tabbar._element[0], 
     nbrOfTabs = 4; 

    var hammer = new Hammer(el); 
    // Bind some events 
    hammer.on('drag', function(event) { 
     var dx = event.gesture.deltaX, 
     idx = tabbar.getActiveTabIndex(), 
     th = el.getBoundingClientRect().width/2; 

    if (dx > th && idx !== -1) { 
     event.gesture.stopDetect(); 
     tabbar.setActiveTab(Math.max(idx - 1, 0)); 
    } 
    else if (dx < -th && idx !== -1) { 
     event.gesture.stopDetect(); 
     tabbar.setActiveTab(Math.min(idx + 1, nbrOfTabs - 1)); 
    } 
    }); 
}); 

http://codepen.io/argelius/pen/vELYaK