很好的问题。有两种不同的方法：
- 正如第二个示例中所做的那样，使用选项卡栏和手势检测器。温泉2.0有一个
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/ https://jsfiddle.net/frankdiox/o25novtu/1/
- 组合
ons-tabbar and ons-carousel元素。这种方法的缺点是ons-carousel-item无法获取模板或单独的文件（检查注释以找到另一个解决方法）。
ons-tab需要一个page属性，你不能将其留空而不会在控制台中出现错误，但我们可以使用ons-tabbar的样式而不是实际组件：http://onsen.io/reference/css.html#tab-bar 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 http://codepen.io/frankdiox/pen/EVpNVg
我们可能会添加一项功能，以便在即将推出的 OnsenUI 版本中简化此操作。
希望能帮助到你！
