Vuetify非滚动导航抽屉 [英] Vuetify non scrolling navigation drawer
本文介绍了Vuetify非滚动导航抽屉的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有下一个结构:在导航抽屉中:-工具栏-搜索块-物品清单-页脚
I have the next structure: In navigation drawer: - Tooolbar - Search block - Items list - Footer
看起来是这样的:
问题是，当我溢出项目列表时，所有导航抽屉的滚动都处于活动状态，而不是激活项目列表滚动.
The problem is, when i overflow items list, the scrolling is active for all navigation drawer instead of activate the items list scrolling.
我正在尝试使项目列表可滚动并且不固定其高度(填充直到页脚的剩余空间).我已经尝试将高度设置为:导航抽屉为100vh，但这没有帮助.
I'am trying to make items list scrollable and without fixing it height (filling remain space till footer). I have tried set height: 100vh for navigation drawer, but it didn't help.
JsFiddle链接此处
JsFiddle link 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>
©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>推荐答案
编辑项目的 v-layout 如下所示:
<v-layout d-flex align-space-around justify-center column class="items">
并添加此CSS:
.items {
max-height: 200px;
overflow: auto;
}
这篇关于Vuetify非滚动导航抽屉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
