Question

我有下一个结构：在导航抽屉中： -工具栏 -搜索块 -物品清单 -页脚

看起来是这样的：

问题是，当我溢出项目列表时，所有导航抽屉的滚动都处于活动状态，而不是激活项目列表滚动。

我正在尝试使项目列表可滚动并且不固定其高度（填充直到页脚的剩余空间）。我已经尝试将高度设置为：导航抽屉为100vh，但这没有帮助。

JsFiddle链接here

Vue.use(Vuetify);

var vm = new Vue({
	el: "#app",
  data: {
  	drawer: null
  }
});

<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
  <v-app>
    <!-- Navigation drawer -->
    <!-- It shouldn't be scrollable -->
    <v-navigation-drawer width="380" dark app right v-model="drawer" permanent fixed>
      <!-- Toolbar -->
      <v-toolbar light color="blue" >
        <v-toolbar-side-icon/>
        <v-toolbar-title>Some</v-toolbar-title>
      </v-toolbar>
      
    <!-- Navigation -->
    <v-container grid-list-md >
      <v-layout row wrap >

        <v-flex d-flex xs12 order-xs5>
          <v-layout row wrap>

            <!-- Inputs -->
            <v-flex d-flex>
              <v-layout column wrap>

                <v-flex d-flex>
                      <v-text-field flat solo-inverted hide-details label="Search"/>
                </v-flex>
                
              
              </v-layout>
            </v-flex>
            
            <!-- Icons -->
            <v-flex d-flex xs1>
              <v-layout column wrap>
                   <v-flex d-flex>
                      <v-icon >search</v-icon>
                  </v-flex>
              </v-layout>
            </v-flex>
          </v-layout>
        
        </v-flex>

        </v-layout>
      
      <v-layout column>
        <v-spacer></v-spacer>
        <v-flex>
          <hr>
        </v-flex>
        <v-spacer></v-spacer>
      </v-layout>


    <!-- List items generator -->
    <!-- It should be scrollable -->
    <v-layout d-flex wrap align-space-around justify-center column fill-height style="overflow: auto">

        <v-flex v-for="i in 50" :key="`1${i}`">
          <v-card dark color="green">
            <v-card-text class="px-0">1</v-card-text>
          </v-card>
        </v-flex>


    </v-layout>
    </v-container>

    
    <v-footer height="auto" color="primary lighten-1">
    <v-layout justify-center row wrap>
      <v-flex primary lighten-2 py-3 text-xs-center white--text xs12>
        &copy;2018 — <strong>Vuetify</strong>
      </v-flex>
    </v-layout>
  </v-footer>
      
    </v-navigation-drawer>

    <v-content>
      Some content
    </v-content>

  </v-app>
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
  <script>

  </script>
</body>
</html>

Answer 1

编辑项v-layout，如下所示：

<v-layout d-flex align-space-around justify-center column class="items">

并添加此CSS：

.items {
    max-height: 200px;
    overflow: auto;
}

Vuetify非滚动导航抽屉

1 个答案: