首页 文章

VueJS：如何滚动v-list-title

提问于
浏览 次
0

用v-list制作列表画面 .
我坚持滚动v-list-title项目 .

我正在使用VueJS和vuetifyjs .

我的代码片段在下面 .

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

我的目标是工具栏区域是固定的，只有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>
vue.js vuetify.js

2 回答

  • 1

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

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

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

    Here是修改后的版本，试一试 .

    回复于
  • 1

    只需将 fixed 道具添加到 v-toolbar ，如下所示：

    <v-toolbar color="light-blue" light extended fixed>

    有关更新的笔，请参阅here

    回复于

相关问题