温泉UI滑动导航

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

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

1. 就像在第二个例子中所做的那样，使用tabbar和手势检测器。温泉2.0有一个slide动画为tabbar，所以你只需要添加<ons-tabbar animation="slide" ... >。温泉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的风格，而不是实际的组件：http://onsen.io/reference/css.html#tab-bar

我们现在有一个全屏旋转木马结合起来就像一个你所提到的，并添加下一个CSS使页面内容尊重我们的TabBar所以它不会翻倒或背后：

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

下一步，我们每一个链接标签，其对应的C arousel item：

<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基本上是一组单选按钮，所以我们只需要得到我们想要在转盘中的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的未来版本，以使它更容易些。

希望它有帮助！