gpt4 book ai didi

javascript - 如何使用 Bootstrap-vue 在 VueJS 中滚动选项卡

转载 作者:行者123 更新时间:2023-11-30 19:46:01 24 4
gpt4 key购买 nike

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

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

在方法中,我以 .nav-tabs 为目标,因为这是一个呈现给 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;
}

最佳答案

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

所以这里是你所缺少的:

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

我刚刚修改了您的沙盒并将上述属性添加到 .nav-tabs

https://jsfiddle.net/Ljk5a62v/

关于javascript - 如何使用 Bootstrap-vue 在 VueJS 中滚动选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54928408/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com