Vue.js VueJS:如何滚动v-list-title
使用v-list制作列表屏幕时。Vue.js VueJS:如何滚动v-list-title,vue.js,vuetify.js,Vue.js,Vuetify.js,使用v-list制作列表屏幕时。 我卡住了滚动v-list-title项 我正在使用VueJS和vuetifyjs 我的代码剪辑在下面 我的目标是工具栏区域是固定的,并且只有v列表标题是可滚动的 <div id="app"> <v-app id="inspire"> <v-container fluid grid-list-lg> <v-layout row wrap> <v-flex xs12 sm
我卡住了滚动v-list-title项 我正在使用VueJS和vuetifyjs 我的代码剪辑在下面 我的目标是工具栏区域是固定的,并且只有v列表标题是可滚动的
<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-lg>
<v-layout row wrap>
<v-flex xs12 sm12 md6>
<v-card>
<v-toolbar color="light-blue" light extended>
<v-btn
fab
small
color="cyan accent-2"
bottom
right
absolute
@click="dialog = !dialog"
>
<v-icon>add</v-icon>
</v-btn>
<v-toolbar-title slot="extension" class="white--text">user list</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-list two-line>
<v-list-tile
v-for="user in users"
avatar
@click=""
>
<v-list-tile-avatar>
<v-icon :class="iconClass">face</v-icon>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>{{ user.lastName }}{{ user.firstName }}</v-list-tile-title>
<v-list-tile-sub-title>{{ user.name }}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon ripple>
<v-icon color="grey lighten-1">info</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
添加
用户列表
面对
{{user.lastName}{{user.firstName}}
{{user.name}
信息
只需将固定
道具添加到v形工具栏
,如下所示:
<v-toolbar color="light-blue" light extended fixed>
请参阅以获取更新的笔尝试添加以下CSS以使v-list-titles可滚动
<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-lg>
<v-layout row wrap>
<v-flex xs12 sm12 md6>
<v-card>
<v-toolbar color="light-blue" light extended>
<v-btn
fab
small
color="cyan accent-2"
bottom
right
absolute
@click="dialog = !dialog"
>
<v-icon>add</v-icon>
</v-btn>
<v-toolbar-title slot="extension" class="white--text">user list</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-list two-line>
<v-list-tile
v-for="user in users"
avatar
@click=""
>
<v-list-tile-avatar>
<v-icon :class="iconClass">face</v-icon>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>{{ user.lastName }}{{ user.firstName }}</v-list-tile-title>
<v-list-tile-sub-title>{{ user.name }}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon ripple>
<v-icon color="grey lighten-1">info</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
.v-list{
高度:300px;
溢出y:自动;
}
这正是我想要的。谢谢。非常感谢这是一项很好的工作。移动视图和桌面视图隐藏滚动条使用此css代码:-webkit滚动条{display:none;}