Question

这是我使用清单的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多个用户，默认情况下该列表不可滚动。有什么特征可以帮助吗？

Answer 1

对于vuetify 2.0，帮助程序类'scroll-y'更改为'overflow-y-auto'。 https://github.com/vuetifyjs/vuetify/releases（只需Ctrl + F'scroll-y'）因此使用。

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

Answer 2

我通过提供max-height: 100px的样式并将vuetify类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>

Answer 3

为了记录，您实际上根本不需要使用style属性，您可以使用overflow-y-auto类和max-height属性：

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

Vue 2.6.10，Vuetify 2.0.0

Answer 4

使用类和样式的解决方案对我不起作用。垂直滚动出现在列表的外部，并应用于包裹它的div。

此解决方案确实可以完美地工作：

 desired_caps = {}
    desired_caps['platformName'] = 'Android' #设置平台
    # desired_caps['platformVersion'] = '4.4' #系统版本
    desired_caps['deviceName'] = '9316d6ac' #设备id
    desired_caps['autoLaunch'] = 'true' #是否自动启动
    desired_caps['app'] = PATH(
        'weibo.apk' #安装包路径，放在该py文件的目录下
    )
    desired_caps['appPackage'] = 'com.sina.weibo' #包名
    desired_caps['appActivity'] = 'com.sina.weibo.EditActivity' #启动的activity
    self.driver = webdriver.Remote('http://127.0.0.1:4723/wd/hub', desired_caps)

'''

Vuetify中的滚动列表

4 个答案: