如何使用 Bootstrap-vue 在 VueJS 中滚动标签

Question

我有一个带有 bootstrap-vue 项目的 VueJS。呈现了一个选项卡列表，但它大于父级的宽度。所以我想要一对按钮来从左到右滚动列表。

我在自己的项目中找到了这个例子。 Horizontal Scroll Using Buttons in VueJS 但是我无法让它与选项卡一起使用。

在我以 .nav-tabs 为目标的方法中，因为这是一个 class 呈现给 DOM。我试图用 .$refs 来解决这个问题，但无法找到实际的元素，因为该元素只有在渲染后才可见。

有人可以帮助滚动标签页吗？

https://jsfiddle.net/timmyl/xg8j7knb/19/

<div id="app">
  <div class="container">
    <b-row class="wrap" ref="wrap">
      <b-tabs content-class="mt-3">
        <b-tab v-for="category in categories" v-bind:title="category.name" :key="category.id">
        </b-tab>
        <b-tab>
          Content
        </b-tab>
      </b-tabs>
    </b-row>
    <b-row>
      <button @click="scroll_left">Scroll Left</button>
      <button @click="scroll_right">Scroll Right</button>
    </b-row>
  </div>
</div>

methods: {
     scroll_left() {
      let content = document.querySelector(".nav-tabs");
      content.scrollLeft -= 50;
    },
    scroll_right() {
      let content = document.querySelector(".nav-tabs");
      content.scrollLeft += 50;
    }

.tab-panel {
  flex-wrap: nowrap;
}

.wrap {
  overflow: hidden;
  width: 100%;
  flex-direction: row;
}

.nav-tabs {
  flex-wrap: nowrap;
  white-space: nowrap;
}

Answer 1

您只需要稍微调整一下 css，因为当前列表的内容正在扩展到全屏，您需要添加 overflow 属性以便内容可滚动，

所以这是你遗漏的：

.nav-tabs {
flex-wrap: nowrap;
white-space: nowrap;
max-width: 500px;
overflow: auto;
}

我刚刚修改了你的沙箱并将上面的属性添加到 .nav-tabs

https://jsfiddle.net/Ljk5a62v/

如何使用 Bootstrap-vue 在 VueJS 中滚动标签

How to scroll Tabs in VueJS with Bootstrap-vue

javascript

bootstrap-4

vuejs2

bootstrap-vue