代码之家 › 专栏 › 技术社区 › Tutu Kaeen

在Vuetify中滚动列表

vuetify.js frontend vue.js css javascript

0

Tutu Kaeen · 技术社区 · 6 年前

下面是我的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>

问题是,我有100多个用户,默认情况下列表是不可滚动的。有什么特质可以帮助你吗?

0 回复 | 直到 6 年前

1

12

SSaaml 6 年前

我是通过 max-height: 100px scroll-y 到 <v-list></v-list>

例如:

<v-list
       style="max-height: 100px"
       class="scroll-y"
>
    <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>

2

11

Baldeep Singh Kwatra 6 年前

对于vuetify 2.0,助手类“scroll-y”更改为 . https://github.com/vuetifyjs/vuetify/releases (只需按Ctrl+F“scroll-y”键)

<v-list style="max-height: 100px"class="overflow-y-auto">

3

4

leftclickben 6 年前

作为记录,你实际上不需要使用 style 属性,您可以使用 overflow-y-auto max-height 道具:

<v-list class="overflow-y-auto" max-height="400">

Vue 2.6.10和Vuetify 2.0.0