如何添加刷卡标签之间切换 [英] How to add swipe to change between tabs

问题描述

我工作的一个HTML5的移动应用程序项目。我发现温泉的UI非常充分使用，并开始做这个工作。

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

现在我要像原生的Andr​​oid界面。请帮助标签之间刷卡

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

我做了标签，因为这

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

推荐答案

温泉UI不具备此功能。它包括锤库来检测手势，所以你可以听拖事件，当用户拖动左右切换标签。

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.

事情是这样的：

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：//$c$cpen.io/argelius/pen/vELYaK

这篇关于如何添加刷卡标签之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！