CODEWITHSUNDEEP
angularjs-directiveonsen-ui
Harsha krishna.K
Harsha krishna.K

Reputation: 41

How to add swipe to change between tabs

I am working on a html5 mobile app project. I found that Onsen ui is very use full and started working on It .

Now I want to swipe between tabs like native android ui .please help

I made tab as this 

<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>

But how to add swipe to change between tabs.

Upvotes: 1

Views: 1235

Answers (1)

Andreas Argelius
Andreas Argelius

Reputation: 3614

Onsen UI doesn't have this feature. It includes the Hammer library to detect gestures, so you could listen to the drag event and switch tabs when the user drags left and right.

Something like this:

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

Upvotes: 2

Related Questions