如何使Vuetify应用程序栏水平滚动

Question

我正在努力使用Vuetify应用程序栏使其水平滚动。

有没有可能以任何方式使其可滚动或可折叠？我正在使用Nuxt/Vuetify来构建一个平台。这是网络视图的图像

这是移动视图的图像

Answer 1

请改用v-slide-groups。https://vuetifyjs.com/en/components/slide-groups/请检查笔链接

<v-app id="inspire" flex>
<v-app-bar
absolute
color="cyan accent-3">
<div class="d-flex flex-row align-center col-12">
<div class="col-8 col-md-8">
<v-slide-group show-arrows v-model="model">
<v-slide-item v-slot:default="{ active, toggle }"
key="a">
<v-btn icon @click="toggle">
<v-icon>mdi-account-group</v-icon>
</v-btn>
</v-slide-item>
<v-slide-item v-slot:default="{ active, toggle }" key="b">
<v-btn icon @click="toggle">
<v-icon>mdi-shield</v-icon>
</v-btn>
</v-slide-item>
<v-slide-item v-slot:default="{ active, toggle }" key="c">
<v-btn icon @click="toggle">
<v-icon>mdi-school</v-icon>
</v-btn>
</v-slide-item>
<v-slide-item v-slot:default="{ active, toggle }" key="d">
<v-btn icon @click="toggle">
<v-icon>mdi-book-open</v-icon>
</v-btn>
</v-slide-item>
<v-slide-item v-slot:default="{ active, toggle }" key="e">
<v-btn icon @click="toggle">
<v-icon>mdi-grid</v-icon>
</v-btn>
</v-slide-item>
<v-slide-item v-slot:default="{ active, toggle }" key="f">
<v-btn icon @click="toggle">
<v-icon>mdi-link</v-icon>
</v-btn>
</v-slide-item>
</v-slide-group>
</div>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-face</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-door</v-icon>
</v-btn>
</div>
</v-app-bar>
<v-content>
<v-container class="mt-10">
<v-row>
<v-col>
You have clicked on {{model}} link
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>

Answer 2

Vuetify API没有选项。你可以用任何方式使用你找到她的想法/概念(与vue/vuetify无关的基本CSS(：https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp-或-https://iamsteve.me/blog/entry/horizontal-scrolling-responsive-menu

style="overflow-x:auto; white-space: nowrap;"

示例：

new Vue({
el: '#app',
vuetify: new Vuetify(),

})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.22/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<div id="app">
<v-app id="inspire">
<div>
<v-app-bar
color="deep-purple accent-4"
dense
dark
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<div style="overflow-x:auto; white-space: nowrap;">
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-domain</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-message</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-email</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-call-split</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-call-split</v-icon>
</v-btn>        <v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-domain</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-message</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-domain</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-message</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</div>
</v-app-bar>
</div>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.22/dist/vuetify.min.js"></script>

如果你想在桌面上禁用这个想法，请使用Media-Q。