Onsen-UI 滑动导航

Question

关闭。这个问题需要debugging details .它目前不接受答案。












想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。

3年前关闭。




Improve this question




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

我尝试实现 idangerous swiper，但运气不佳。我的想法是结合:

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

enter code here

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

enter code here

当您滑动时，选项卡会发生变化，但具有滑动动画/效果。如果每个选项卡/滑动是不同的 html 而不是一个索引文件，我也会喜欢它。

任何想法或帮助？

Answer 1

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

正如您在第二个示例中所做的那样，使用标签栏和手势检测器。 Onsen 2.0 有一个 slide标签栏的动画，所以你只需要添加 <ons-tabbar animation="slide" ... > . Onsen 2.0 仍处于 alpha 版本，但将在 future 几周内发布。这种方法的缺点是滑动动画在滑动 Action 完成后开始。

您基本上添加了您的 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的样式而不是实际组件: 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>

等等。这将使当我们单击选项卡时，轮播自动更改。现在我们需要做相反的连接:当我们滑动轮播时更新选中的选项卡。标签栏基本上是一组单选按钮，所以我们只需要在轮播的 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 版本中添加一个功能，使这更容易。

希望能帮助到你!