如何使 Vuetify 应用栏可水平滚动

Posted 2023-02-22

【中文标题】如何使 Vuetify 应用栏可水平滚动

【英文标题】：How to make Vuetify App bar scrollable horizontally

【发布时间】：2020-07-30 21:41:44

【问题描述】：

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

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

This is the image of mobile view

【问题讨论】：

阅读工具栏文档：vuetifyjs.com/en/components/toolbars/#toolbars。有一个叫做 collapse 的道具可能会对你有所帮助。

【参考方案1】：

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

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

【讨论】：

这将类似于我想要的。我们只需要左右隐藏箭头按钮。并使幻灯片组更宽一点

【参考方案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。

【讨论】：

感谢您的回复。我想要它没有滚动条。

w3schools.com/howto/howto_css_hide_scrollbars.asp

如果我们隐藏滚动条我就不能滚动

这就是为什么在桌面上滚动条应该是可见的......对于自定义设计滚动条，请使用 css。对于拖动滚动使用 js。无论如何，这就是你的问题的答案。