1

我正在为前端使用 onsen-ui 2 制作一个 android 应用程序。我将通过一个页面上的选项卡显示多个类别。由于大约有 7 个类别，我想像在原生 android 应用程序中一样实现可滚动的选项卡栏。所以，基本上如何使用 onsen-ui 2 做类似可滚动标签栏的事情。现在我认为它不是内置的。我想实现这样的事情：

http://i.stack.imgur.com/zjILk.png

我确实尝试过使用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();
});

可滚动标签栏工作正常。但是如果tab-bar类的宽度太大，最后会有空格。有什么办法可以克服这个吗？我认为的一个答案是 CSS 媒体查询，但标签是动态添加的。因此，它们将来可能会超过 7。任何帮助将不胜感激。

4

1 回答 1

2

从技术上讲，这取决于您对奖励箭头和类似事物的关心程度。如果您真的想要这样的附加功能，外部库可能会有所帮助。但是，如果您想要的只是拥有可滚动标签栏的能力，那么您可以在几行 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）。不过，这仍然是你的决定。

于 2016-04-25T11:10:35.443 回答