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

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

是否可以以任何方式使其可滚动或折叠？ 我正在使用Nuxt/Vuetify构建一个平台。

---

Vuetify API没有选项。您可以使用找到她的想法/概念的任何方式（基本CSS与vue/vuetify无关）： -或

示例：

newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
})

心脏
mdi域
mdi消息
mdi放大
mdi电子邮件
mdi呼叫拆分
mdi放大
mdi呼叫拆分
mdi放大
心脏
mdi域
mdi消息
mdi放大
mdi域
mdi消息
mdi放大

改用v-slide-groups。请检查这支笔

mdi帐户组
mdi屏蔽
mdi学校
mdi书籍打开
mdi网格
mdi链路
mdi面
mdi门
您已单击{{model}}链接

谢谢您的回复。如果我们隐藏滚动条，我就不能滚动。这就是为什么在桌面上滚动条应该是可见的。对于自定义设计滚动条，请使用css。对于拖动滚动，请使用js。这是您的问题的答案。请阅读工具栏的文档：。有一个叫做“崩溃”的道具可能会帮到你。这和我想要的差不多。我们只需要隐藏左右箭头按钮。让幻灯片组稍微宽一点

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

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