Onsen-UI滑动导航

Question

我试图通过使用"滑动"导航来弄清楚如何在Onsen-UI上实现"android"感觉.

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

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

enter code here

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

enter code here

滑动时,选项卡会更改,但具有滑动动画/效果.如果每个标签/滑动是一个不同的html而不是一个索引文件,我也会喜欢它.

任何想法或帮助？

Answer 1

好问题.有两种不同的方法:

1. 正如您在第二个示例中所做的那样,使用tabbar和手势检测器.Onsen 2.0有一个slidetabbar动画,所以你只需要添加<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/

2. 结合ons-tabbar和ons-carousel元素.这种方法的缺点是ons-carousel-item无法获取模板或分离文件(请查看注释以找到另一种解决方法).

ons-tab需要一个page属性,你不能把它留空而没有错误在控制台中,但我们可以使用ons-tabbar's样式而不是实际的组件:http://onsen.io/reference/css.html#tab-bar

我们现在将它与您提到的全屏旋转木马相结合,并添加下一个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>

等等.这将使我们点击标签时轮播自动更改.现在我们需要进行相反的连接:当我们滑动轮播时更新选中的选项卡.tabbar基本上是一组单选按钮,所以我们只需要在carousel的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://codepen.io/frankdiox/pen/EVpNVg

我们可能会添加一项功能,以便在即将推出的OnsenUI版本中实现这一功能.

希望能帮助到你!