javascript Vuetify 中的滚动列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54904746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
scrolling list in Vuetify
提问by Tutu Kaeen
Here's my Vuetify code for using list:
这是我使用列表的 Vuetify 代码：
<v-list>
<v-list-tile
v-for="user in users"
:key="user.id"
avatar
@click=""
>
<v-list-tile-content>
<v-list-tile-title v-text="user.name"></v-list-tile-title>
</v-list-tile-content>
<v-btn icon>
<v-icon>edit</v-icon>
</v-btn>
</v-list-tile>
</v-list>
The problem is, that I have over 100 users and the list is not scrollable by default. Is there any trait that helps with it?
问题是，我有 100 多个用户，默认情况下该列表不可滚动。有什么特性可以帮助它吗？
回答by SSaaml
I achieved this by giving the style of max-height: 100pxand adding vuetify class overflow-y-autoto <v-list></v-list>
我通过提供样式max-height: 100px并将 vuetify 类添加overflow-y-auto到<v-list></v-list>
For eg:
例如：
<v-list
style="max-height: 100px"
class="overflow-y-auto"
>
<template
v-for="user in users"
>
<v-list-tile
:key="user.id"
avatar
@click=""
>
<v-list-tile-content>
<v-list-tile-title v-text="user.name"></v-list-tile-title>
</v-list-tile-content>
<v-btn icon>
<v-icon>edit</v-icon>
</v-btn>
</v-list-tile>
</template>
</v-list>
回答by Baldeep Singh Kwatra
For vuetify 2.0 the helper class 'scroll-y' is changed to 'overflow-y-auto'. https://github.com/vuetifyjs/vuetify/releases(Just Ctrl+F 'scroll-y') So use.
对于 vuetify 2.0，助手类 'scroll-y' 更改为'overflow-y-auto'。 https://github.com/vuetifyjs/vuetify/releases(Just Ctrl+F 'scroll-y') 所以使用。
<v-list style="max-height: 100px"class="overflow-y-auto">
回答by leftclickben
For the record, you don't actually need to use a styleattribute at all, you can do it with the overflow-y-autoclass and a max-heightprop:
作为记录，您实际上根本不需要使用style属性，您可以使用overflow-y-auto类和max-height道具来实现：
<v-list class="overflow-y-auto" max-height="400">
Vue 2.6.10, Vuetify 2.0.0
Vue 2.6.10，Vuetify 2.0.0
回答by Javier Escobar
That solution using class and style did not work for me. The vertical scroll appeared outside the list and was applied to the div that was wrapping it.
使用类和样式的解决方案对我不起作用。垂直滚动出现在列表之外并应用于包装它的 div。
This solution did work perfect:
这个解决方案确实很完美：
<v-list three-line max-height="400px" class="overflow-y-auto">
