onsen ui 2 : 如何实现 android 风格的可滚动标签栏？

Question

我正在制作一个 android 应用程序，前端使用 onsen-ui 2。我将在一个 page.Since 上通过选项卡显示多个类别，大约有 7 个类别，我想像在本机 android 应用程序中一样实现可滚动的选项卡栏。所以，基本上如何使用 onsen-ui 2 做一些类似可滚动标签栏的事情。现在我认为它不是 built-in。我想实现这样的东西：

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

我试过使用 materialize css 但它不起作用 perfectly.It 增加了页面的宽度并破坏了响应式视图。

更新：我设置这些 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 class 的宽度太大，最后会有空白。有什么办法可以克服这个问题吗？我认为的一个答案是 CSS 媒体查询，但正在添加标签 dynamically.So，他们可能会在 future.Any 帮助中超过 7 个，我们将不胜感激。

Answer 1

从技术上讲，这取决于您对奖金箭头和类似事物的关心程度。如果您真的想要这样的额外功能，外部库可能会有所帮助。但是，如果您想要的只是具有可滚动标签栏的能力，您可以在几行 css:

中轻松实现这一点

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

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

Demo

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

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

关于动能的注意事项：它看起来不错，但您也应该尝试看看没有它时的感觉，因为如今大多数手机似乎已经具有不错的运动滚动功能（至少在我看来是这样）。不过这仍然是你的决定。

onsen ui 2 : 如何实现 android 风格的可滚动标签栏？

onsen ui 2 : how to implement android style scrollable tabbar?

css

responsive-design

onsen-ui

onsen-ui2