如何添加滑動以更改標籤頁

Question

我正在開發一個html5移動應用程序項目。我發現溫泉ui的使用非常豐富，並開始致力於它。

現在我要像Android原生UI選項卡之間刷卡。請幫助

我做了標籤，因爲這

<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

溫泉用戶界面不具備此功能。它包含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