VueJS:如何滚动 v-list-title [英] VueJS: How to scroll v-list-title

问题描述

同时使用 v-list 制作列表屏幕.
我一直在滚动 v-list-title 项目.

我正在使用 VueJS 和 vuetifyjs.

我的代码片段在下面.

https://codepen.io/badsaarow/pen/aaRaxe?editors=1010

我的目标是工具栏区域是固定的，只有 v-list-titles 是可滚动的.

<v-app id="inspire"><v-容器流体网格列表-lg><v-layout row wrap><v-flex xs12 sm12 md6><v-card><v-toolbar color="light-blue" light extended><v-btn晶圆厂小的颜色=青色重音-2"底部对绝对@click="dialog = !dialog"><v-icon>添加</v-icon></v-btn><v-toolbar-title slot="extension" class="white--text">用户列表</v-toolbar-title><v-间隔></v-间隔></v-工具栏><v-list 两行><v-list-tilev-for="用户中的用户"头像@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图标波纹><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-容器></v-app>

解决方案

尝试添加以下 CSS 以使 v-list-titles 可滚动.

.v-list {高度:300px；溢出-y:自动；}

我们需要为我们的 DOM 对象指定一个固定的高度，一旦我们将 overflow-y 属性设置为 auto.一旦内容的长度大于父内容，就会显示滚动条.

这里是修改版，试试看.

While making list screen with v-list.
I stuck scrolling v-list-title items.

I'm using VueJS and vuetifyjs.

My code snip is at below.

https://codepen.io/badsaarow/pen/aaRaxe?editors=1010

My aim is that toolbar area is fixed, and only v-list-titles are scrollable.

<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>

解决方案

Try to add following CSS to make v-list-titles scrollable.

.v-list {
  height: 300px;
  overflow-y: auto;
}

We need to specify a fixed height for our DOM object, and once we set the overflow-y attribute as auto. A scroll bar will show up once content has bigger length than parent.

Here is the modified version, have a try.

这篇关于VueJS:如何滚动 v-list-title的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！