Question

我正试图弄清楚如何使用“滑动”导航在Onsen-UI上实现“android”感觉。

我尝试过实施危险的狙击手，但没有太多运气。我的想法是结合：

enter code here

http://codepen.io/negibouze/pen/wBLeyp

enter code here

当您滑动时，标签会更改，但具有滑动动画/效果。如果每个标签/滑动是不同的html而不是一个索引文件，我也会喜欢它。

任何想法或帮助？

Answer 1

好问题。有两种不同的方法：

正如您在第二个示例中所做的那样，使用tabbar和手势检测器。 Onsen 2.0的tabbar有slide动画，因此您只需添加<ons-tabbar animation="slide" ... >即可。 Onsen 2.0仍处于alpha版本，但它将在未来几周内发布。这种方法的缺点是在滑动操作完成后幻灯片动画开始。

您基本上添加了ons-tabbar元素，然后按如下方式配置手势检测器：

ons.ready(function() {
  // Create a GestureDetector instance over your tabbar
  // The argument is the actual HTMLElement of tabbar, you can also do document.getElementById(...)
  var gd = ons.GestureDetector(myTabbar._element[0]); 

  gd.on('swipe', function(event) {
    var index = myTabbar.getActiveTabIndex();
    if (event.gesture.direction === 'left') {
      if (index < 3) {
        myTabbar.setActiveTab(++index);
      }
    } else if (event.gesture.direction === 'right') {
      if (index > 0) {
        myTabbar.setActiveTab(--index);
      }
    }
  })
});

在此工作：https://jsfiddle.net/frankdiox/o25novtu/1/

合并ons-tabbar和ons-carousel个元素。这种方法的缺点是ons-carousel-item无法获取模板或分隔文件（请查看注释以找到另一种解决方法）。

ons-tab需要page属性，您不能在控制台中将其留空而不会出错，但我们可以使用ons-tabbar的样式而不是实际的组件：{ {3}}

我们现在将它与您提到的全屏旋转木马相结合，并添加下一个CSS，使页面内容尊重我们的标签栏，这样它就不会落在它后面：

ons-carousel[fullscreen] {
  bottom: 44px;
}

下一步，我们将每个标签链接到相应的轮播项目：

<div class="tab-bar" id="myTabbar">
  <label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(0)">
    ...
  </label>

  <label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(1)">
    ...
  </label>

  <label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(2)">
    ...
</div>

等等。这将使我们点击标签时轮播自动更改。现在我们需要进行相反的连接：当我们滑动轮播时更新选中的选项卡。标签栏基本上是一组单选按钮，所以我们只需要在轮播的postchange事件中获取我们想要的那个并检查它：

ons.ready(function(){
  carousel.on('postchange', function(event){
    document.getElementById('myTabbar').children[event.activeIndex].children[0].checked = true; 
  });
});

您现在可以更改每个carousel-item-index的内容，并插入ons-page您想要的任何内容。

在此工作：http://onsen.io/reference/css.html#tab-bar

我们可能会在即将推出的OnsenUI版本中添加一项功能，以便更轻松。

希望它有所帮助！

Onsen-UI滑动导航

1 个答案: