Question

我正在使用onsen-ui 2为前端制作一个Android应用程序。我将通过一页上的标签显示多个类别。由于大约有7个类别，我想在本机Android应用程序中实现可滚动的标签栏。所以，基本上如何使用onsen-ui 2来做可滚动的tab-bar之类的东西。现在我认为它不是内置的。我想实现这样的事情：

我确实尝试过使用materialize css，但它并没有完美地工作。它增加了页面的宽度并打破了响应式视图。

更新：我设置这些CSS属性以获得扩展视图：

`    .tab-bar{
      display: block;
      table-layout: none;
      width:200%; //this is the problem now...
      }`

与此同时我添加了自定义jquery.kinetic库以从此处获得触摸滚动：http://davetayls.me/jquery.kinetic/ 并初始化为ons-tabbar，如下所示： <ons-tabbar modifier="material" id="tab"> //in HTML

$(document).ready(function(){
$("#tab").kinetic();
});

可滚动的tabbar工作正常。但如果tab-bar类的宽度太大，则最后会有空格。有没有办法克服这个问题？我认为一个答案是CSS媒体查询，但是动态添加标签。所以，他们将来可能会超过7个。任何帮助都将受到赞赏。

Answer 1

技术上，它取决于你对奖金箭头和类似事物的关注程度。如果你真的想要这样的额外内容，外部库可能会有所帮如果您想要的只是具有可滚动的tabbar的能力，您可以在几行css中轻松实现这一点：

.tab-bar {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
}

.tab-bar__item {
  display: inline-block;
}

在演示中，我还在项目中添加了width: 20%。如果你不喜欢，你可以添加一些填充或类似的东西，使项目看起来不错。通常像padding: 0 10px这样的东西应该足够了。

如果你想要>箭头，我想一些javascript将是必需的。由于问题标记为css3，但我猜你想避免为此编写javascript。

还有一个关于动能的说明：它看起来不错，但你也应该试着看看没有它的感觉，因为现在大多数手机似乎已经有了很好的动画滚动（至少是imo）。不过，这仍然是你的决定。