Javascript 如何使用引导vue在VueJS中滚动选项卡

我有一个VueJS与引导vue项目。 将呈现选项卡列表，但该列表大于父选项卡的宽度。所以我想要一对按钮来从左向右滚动列表

我在自己的项目中找到了这个例子。 但我不能让它与标签一起工作

在方法中，我使用target.nav选项卡，因为这是一个呈现给DOM的类。我试图用.$refs解决这个问题，但无法找到实际的元素，因为该元素只有在渲染后才可见

有人能帮我把标签滚动一下吗

---

您只需要稍微调整一下css，因为当前列表的内容正在扩展到全屏，您需要添加

overflow

属性，以便内容可以滚动

因此，这里是您缺少的：

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

我刚刚修改了您的沙盒，并将上述属性添加到

.nav tabs

---

hey@kashalo你能告诉我如何使选项卡内容可滚动吗？我使用自定义类作为选项卡内容的包装，使用了

高度：100%，溢出-y:auto

，但仍然不起作用。

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;
}

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