Question

我正在开发一个html5移动应用项目。我发现Onsen ui非常充实，并开始研究它。

现在我想在像本机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>

但是如何添加滑动以在标签之间进行更改。

Answer 1

Onsen UI没有此功能。它包括用于检测手势的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

如何添加滑动以在标签之间进行更改

1 个答案: