当设置为溢出时滚动时，Vuetify v-list不会考虑其父列表的高度
Vuetify是一个基于Vue.js的开源UI组件库，提供了丰富的组件和样式，用于构建现代化的Web应用程序。v-list是Vuetify中的一个列表组件，用于展示一系列的项目或选项。
当设置为溢出时滚动时，Vuetify v-list组件不会考虑其父列表的高度，这意味着当列表中的项目超出父容器的可见区域时，会出现滚动条以便用户可以滚动查看隐藏的项目。
这种设置适用于以下场景：
- 当列表中的项目数量较多，超出了父容器的可见区域时，可以使用溢出滚动来保持界面整洁，并且用户可以通过滚动条浏览所有项目。
- 当列表中的项目高度不一致时，使用溢出滚动可以确保父容器的高度不会随着项目高度的变化而改变，从而保持整体布局的稳定性。
对于Vuetify v-list组件，腾讯云没有直接相关的产品或产品介绍链接地址。然而，腾讯云提供了一系列与云计算相关的产品和服务，如云服务器、云数据库、云存储等，可以帮助开发者构建和部署基于云计算的应用程序。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于腾讯云的产品和服务信息。
相关·内容
如何将垂直滚动条添加到full-height容器中的v-list组件？在花了大半天的时间尝试不同的东西后，v-list仍然溢出，页面变得比视口大，这不是我想要的。我只是想创建一个全屏幕的两栏布局。左列将显示选项列表，可能是数百个选项(因此应该是可滚动的)，而右列将显示GMaps。
<v-app>
<v-app-bar app>
<v-toolbar-title class="headline text-uppercase">
<span>Company Name</span>
</
浏览 4提问于2019-08-25得票数 0
我正在使用Vue/Vuetify，并且有一个可滚动的v-list：
<v-layout scrollable ...
<v-list ...
<template v-for=id...
<v-list-item :key=id...
是否可以以编程方式滚动项目，以便某个特定项位于可滚动列表的可见区域？
浏览 9提问于2022-01-29得票数 3
回答已采纳
2回答
如何设置正确的vuetify卡内容大小才能滚动？不幸的是，vuetify文档只显示了最简单的情况，没有真实的数据。下面是卡片内部的列表和页脚： https://jsfiddle.net/Feofilakt/0Lnzteqm/ Vue.use(Vuetify);
var vm = new Vue({
el: "#app",
methods: {},
data: {}
}); <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
&
浏览 20提问于2019-09-09得票数 4
回答已采纳
3回答
在Vuetify中滚动列表
、、、、
下面是我使用list的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-
浏览 0提问于2019-02-27得票数 20
回答已采纳
2回答
防止集装箱柱的膨胀高度
、、、
我有一个用Vuetify构建的二次布局，其中左列包含不同的纵横比的媒体，右边的列包含一个播放列表。当播放列表太长时，它会扩展容器的高度，在媒体下留下一个空区域。
我正在尝试使用它，所以如果正确的列有太多的内容，它会滚动，而不会展开容器。我试着设置一个最大的高度，但由于媒体的纵横比可能不同，最大的高度不知道，这意味着它可能会过早被切断。
<v-card dark>
<v-row no-gutters class="playlist-container">
<v-col cols="8" class="pa-0
浏览 3提问于2020-02-11得票数 1
回答已采纳
在对话框中，我对Vuetify列表有异议。我的目标是有可用的页眉/页脚，在里面有一个可滚动的列表，所有这些内容的最大高度为600 to，但在较小的屏幕上进行调整。
现在，我有一个问题，它在更大的屏幕高度>600 to时正确工作(我可以滚动列表+看到底部的按钮)，但是在较小的屏幕上工作不正确(可以滚动列表，但必须在末尾滚动才能看到按钮)。
有人知道我忘了补充什么吗？
<!-- MovementsInput component -->
<template>
<v-form
ref="form"
v-model="valid&#
浏览 1提问于2019-07-18得票数 0
回答已采纳
我正在尝试使用vuetify文档实现vuetify v-list头像，其中包含3行代码。但是，该列表将会显示，但不会覆盖整个屏幕。
以下是我的代码
<template>
<v-container fluid>
<v-layout row wrap>
<v-flex>
<v-list>
<template v-for="(item, index) in items">
<v-subheader
浏览 17提问于2019-10-31得票数 0
对话框内的列表长度约为360个硬币。单击按钮打开对话框后，在显示对话框之前会有大约2-3秒的延迟。这是一个相当糟糕的用户体验，因为它可能看起来好像按钮不起作用。我希望一旦对话框变得可见，就加载列表。我尝试在v-list中使用v-if="dialog“，但它没有给我带来任何更好的结果。
现在我在想，有没有Vue或Vuetify的方法来解决这个问题？
顺便说一句，我是JS和Vue的新手。
相关代码如下：
<v-dialog v-model="dialog">
<template v-slot:activator="{ on }"&g
浏览 21提问于2020-03-01得票数 0
一旦我使用Angular材质(以及flexbox)设置了一个UI，如下所示：
这两个div位于一个父容器中。我真正喜欢的布局是容器的高度是由第一个div指定的(隐式地，通过max-width和缩放)，而第二个div遵守这个高度，并为任何溢出创建一个滚动。
我正在用VueJS和Vuetify重写应用程序，我就是不能翻译旧的布局。我试着对原始的CSS进行逆向工程，但Angular Material创建的结构使其难以实现。
这是我最近的一次，但是滚动区仍然溢出到容器之外：
<v-container fluid>
<v-layout v-bind=&
浏览 0提问于2017-10-26得票数 3
回答已采纳
这是一把小提琴：
在campaignDiv div上总是有一个滚动条。我增加了高度，但滚动条仍然出现。
我不想使用溢出:隐藏。
浏览 3提问于2014-05-24得票数 0
回答已采纳
我有很长的联系人名单。如果滚动列表，工具栏标题应显示工具栏标题下面的人的姓名。
CodePen示例：
我使用的是VueJS和Vuetify框架。Vuetify提供以下组件，但它基于位置-如何获取列表条目的名称？
卷轴：
滚动：
HTML：
<div id="app">
<v-app id="inspire">
<v-card
max-width="500"
class="mx-auto"
>
<v-toolbar
浏览 0提问于2019-09-13得票数 1
回答已采纳
我在Vuetify中实现了一个导航抽屉，它可以滚动到同一页中的锚。当我点击一个锚，它会被选中，这是很好的工作。但是，现在我想更新导航抽屉中的选定项，只要用户在不同的部分滚动。
<v-navigation-drawer
app
clipped
>
<v-list shaped>
<v-list-item-group v-model="item" color="primary" selectedItem=0>
<v-list-item
浏览 1提问于2020-01-06得票数 1
我怀疑这与我未能将JS文件正确地拉进来有关，但我还没有钻研到任何错误。似乎有些CSS的功能，如列表突出事件，没有在我的应用程序中发挥作用，在该应用程序中，我试图在Vue.js和Webpack的应用程序中使用Vuetify。
我试图实现的示例是
在我的实现中，悬停在列表项上不会触发背景颜色更改或光标类型更改。
我的代码：
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetif
浏览 0提问于2017-12-09得票数 1
回答已采纳
我正在尝试使用下一个模板在列表中呈现自定义vuetify图标：
<template v-for="item in items">
<v-list nav :key="item.name">
<v-list-item link :to="item.to">
<v-list-item-icon>
<v-icon color="white">{{$vuetify.icons.values[item.
浏览 1提问于2022-02-20得票数 0
回答已采纳
我有一个网站，其中一个页面不应该滚动(整个页面应该适合客户的屏幕)。在这个站点上，我需要在一个列中有一个可选对象的列表，它可能非常大(它最终肯定会溢出屏幕)
我将这些项存储在一个<v-list>组件中，并命令它在溢出时滚动。然而，问题是，当<v-list-item>元素的数量太多时，它会迫使其父列增加大小，从而破坏不可滚动的页面布局。这似乎是因为所有实际的<v-list-item>组件仍在渲染，这会拉伸<v-list>，尽管它被设置为在达到父高度的100%时溢出。
我可以通过用px定义max-height来解决这个问题。但这不是一个可接受的解决方
浏览 22提问于2021-05-18得票数 0
回答已采纳
1回答
溢出隐藏不工作，尽管有高度设置
、、、、
我无法隐藏溢出：
.loader-overlay {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
margin: 0;
padding: 0;
overflow: hidden;
}
我已经浏览了前面的线程:我给元素以溢出:隐藏的高度，我将另一个容器(我的内容div)设置为:相对，但是当我在最初的动画中滚动时，我仍然可以看到我的内容在下面。如果有任何提示我会很感激的。
浏览 3提问于2016-10-11得票数 1
回答已采纳
1回答
Javascript错误：
[Vuetify] Multiple instances of Vue detected
See https://github.com/vuetifyjs/vuetify/issues/4068
If you're seeing "$attrs is readonly", it's caused by this
consoleError @ vuetify.js:22001
install @ vuetify.js:16239
Vue.use @ vue.esm.js:4751
install @ vuetify.js:17943
浏览 2提问于2018-12-02得票数 7
1回答
我试图在NuxtJS中使用Vuetify组件，但是当我部署我的应用程序时，列表根本不是反应性的(没有悬停效应，没有链接)。
NuxtJS的文档说所有内部页面链接都必须使用<NuxtLink>组件，但是当使用预构建组件时，这怎么可能呢？
NuxtLink组件添加了不想要的样式。我假设我需要黑掉CSS才能让它不这么做？
<v-list>
<v-list-item to="/some/endpoint">
<!-- content -->
</v-list-item>
</v-list&g
浏览 2提问于2022-04-17得票数 1
回答已采纳
我正在尝试使用vuetify实现列表中的列表。但我没能成功。下面是代码和示例数据。请帮我把它做好。我用的是vuetify 2.3.10。如果我注释掉了第二个列表的部分，那么第一个列表就可以了。
<template>
<div>
<v-toolbar id="filter">
<v-layout row wrap>
<v-flex xs12 md1>
<v-menu attach="#filter-u
浏览 3提问于2020-09-11得票数 0
回答已采纳
我用vue和vuetify设置了以下菜单： <div id="app">
<v-app id="inspire">
<div class="text-center">
<v-menu>
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
>
Click me
浏览 20提问于2021-08-25得票数 1
2回答
我用flexbox和vuetify创建了布局，其中卡片包含页眉和页脚，以及它们之间的可滚动内容。
下面是codepen的当前代码：
我需要适合卡(包括容器的填充物)在高度，以删除主页的滚动条。你能告诉我如何编辑代码以确保这一点吗？谢谢。
代码：
<div id="app">
<v-app id="inspire">
<v-container fluid style="height: 100%;">
<v-row style="height: 100%"&
浏览 3提问于2020-09-18得票数 1
当容器div太长时，尝试让它显示水平滚动条。相反，容器div本身溢出它的父程序。
这是我的代码：
.root {
background-color: blue;
padding: 5px;
display: flex;
}
.left {
background-color: yellow;
flex: 0 0 auto;
width: 60px;
}
.right {
background-color: green;
padding: 5px;
}
.container {
overflow-x: scroll;
}
.content {
b
浏览 1提问于2018-09-20得票数 0
回答已采纳
我有一个带有导航栏的应用程序，它应该在屏幕的左侧保持静态。在屏幕的其余部分有一个项目列表，与我无关，它可以是无限制的。 问题是，导航栏正在增长，以匹配该列表，并滚动。我希望它是静态的，而不管列表的大小。 App.vue文件模板： <template>
<div id="app">
<v-app>
<v-row>
<navbar/>
<v-main>
<
浏览 86提问于2020-11-11得票数 1
回答已采纳
3回答
如何使用javascript滚动到网页中的元素？我想基本上创建与使用<a href="#link"></a>时相同的事情，但在javascript中使用函数。我不想使用任何jQuery，我目前使用的是带有Vuetify框架的VueJS。我的导航如下所示：
<v-navigation-drawer
persistent
:mini-variant="miniVariant"
:clipped="clipped"
v-model="drawer"
enable-resize-watch
浏览 1提问于2018-09-26得票数 0
1回答
我正在从事Vue项目，使用VUEX和Vuetify支持两种语言。
而不是像这样直接引用文本：
{{ $vuetify.t('$vuetify.my-component.text') }}，我将其作为状态放在命名空间的VUEX存储模块中，然后将其引用为mapstate计算属性，如下所示：{{ textProp }}
在计算的脚本中，我将...mapState('language', ['textProp'])放在VUEX模块中，它是一个VUEX模块：
export default {
namespaced,
state() {
浏览 0提问于2019-07-13得票数 0
回答已采纳
1回答
免责声明:我只是在学习vue.js和vuetify，我对javascript不太熟悉。我正在编写我的第一个vue.js应用程序。
我用的是vue 2.x和vuetify 2.x。
我需要创建一个可滚动的项目列表，用户可以对其执行操作。现在，我只关心列表项的布局。
该项目由两个可见信息组成，一个数字和一个文本(如清单)应显示在两列中。数字应在其列中右对齐，文本左对齐。
这就是我到目前为止所拥有的。
<template>
<v-list dense>
<template v-for="(item, index) in items">
浏览 0提问于2021-07-26得票数 1
回答已采纳
我目前使用的是下列库：https://www.npmjs.com/package/vue-signature-pad，其中包含以下示例：https://codesandbox.io/s/n5qjp3oqv4 我将其作为示例应用，但我将其放在一个模式中： <v-dialog v-model="canvasVehiculo" fullscreen hide-overlay transition="dialog-bottom-transition">
<v-card>
<v-toolbar dark
浏览 120提问于2019-04-17得票数 4
回答已采纳
如果v列表项是活动的，我想在它前面加上一个图标。我不知道该怎么做。
<v-list class="px-15 pt-5" border density="compact">
<v-list-item v-for="(item,i) in items">
<!-- put an icon here but only if it is active? -->
<v-list-item-content>
<v-list-item-title v-text="
浏览 4提问于2022-11-18得票数 0
回答已采纳
对于每个v-list-item，我希望在单击时弹出一个v-menu。 https://codepen.io/hobbeschild/pen/JjKPagg 在每个列表项的边框周围有一些地方，样式指示您可以单击，但单击不会执行任何操作。 如何确保可点击区域最大化到整个列表项？ HTML： <div id="app">
<v-app id="inspire">
<v-card
class="mx-auto"
max-width="300"
tile
浏览 17提问于2020-10-06得票数 0
1回答
我正在尝试从vuetify item-group预选项目。它适用于字符串，但不适用于对象。在vuetify文档中，它们使用string数组作为项组的项列表。效果很好。
如果我尝试使用一个对象数组作为项目列表，它就不能工作
<div id="app">
<v-app id="inspire">
<v-card class="mx-auto" max-width="500">
<v-list shaped>
<v-list-item-grou
浏览 1提问于2019-09-24得票数 2
回答已采纳
1回答
未正确显示的物品
、、、、
我使用vuetify来正确地显示列表项，如下所示
Interests
btn1 btn2
btn3 btn4
Not Interests
btn1 btn2
btn3 btn4
但标题“利益”，“不利益”没有正确地出现。
<v-layout row wrap>
<v-flex xs12 v-for="kid in kids">
<v-card color="blue-grey darken-2" class="white--text">
<
浏览 2提问于2018-05-26得票数 1
回答已采纳
1回答
这是一个Vue.js项目，我正在使用Vuetify。我有个导航抽屉。当屏幕宽度为1263 At时，调整大小的观察器启动，抽屉关闭。我可以用“永久”来阻止这件事。我想要做的是，而不是关闭抽屉开关迷你。
这是我现有的代码。
<v-navigation-drawer
clipped
:mini-variant="mini"
v-model="drawer"
permanent
app
hide-overlay
>
<v-list dense>
<v-list-t
浏览 0提问于2019-06-05得票数 3
回答已采纳
1回答
我有一个带有太长文本的v-list，所以我想使用v-tooltip，这样当有人悬停在文本上时，它就会显示完整的字符串。不幸的是，当我将鼠标悬停在一个项目上时，它会显示vlist中所有项目的工具提示。 <div class="productNameIncoming">
<v-list v-for="nameIncoming in productNameIncoming" :key="nameIncoming">
<v-tooltip v-model="show" right
浏览 13提问于2020-01-27得票数 0
1回答
我有一个带有侧边栏和容器的应用程序。侧边栏是屏幕的高度，但是容器的内容更长，所以我在容器css中添加了overflow-x: hidden，以添加滚动功能。 现在，我尝试在容器中添加一个Vuetify组件。但是由于这种overflow-x样式，autocomplete组件的下拉列表将随页面滚动，而不是停留在输入字段中。 我使用Vuetify文档页面中的一些简化代码创建了一个codepen，因此您可以查看其行为：https://codepen.io/brm49024/pen/PoqaBzM。 所以，我的目标是让下拉菜单在滚动时粘在输入栏上。有什么方法可以做到这一点吗？
浏览 18提问于2020-03-19得票数 1
回答已采纳
1回答
我正在使用vuetify，我想在对话框中创建一个可滚动的。
这是一个codepen
我在v-stepper-items上应用了我的类stepper-scrollable-content
.stepper-scrollable-content {
overflow: auto;
max-height: 200px;
}
<v-stepper-items class="stepper-scrollable-content">
<v-stepper-content step="1">
...
</v-step
浏览 1提问于2019-03-07得票数 0
回答已采纳
1回答
我想实现一个应用程序由几个卡视图和一个成功的按钮。在每一次点击按钮，页面应该滚动到它的底部。
我找到了一些Q&As，它们通过原生javascript实现滚动，但我没有了解如何在Vuetify框架上实现它。我查看了文档()，注意到滚动是通过$vuetify.goTo实现的。
但是，我没有找到在Vuetify-like样式上指定页面底部的确切方法。
用好的Vuetify管理器实现它有什么好主意吗？
浏览 0提问于2019-08-13得票数 2
2回答
当使用v列表制作列表屏幕时。
我坚持滚动v-列表标题的项目。
我用的是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>
浏览 0提问于2018-09-18得票数 3
回答已采纳
<v-list shaped>
<v-navigation-drawer>
<v-list shaped>
<v-list-item-group
v-model="selectedItem"
multiple
>
<template v-for="(item, i) in items">
<v-list-item
:value="item"
浏览 3提问于2021-12-05得票数 1
在这个中，子级溢出父级高度，但是为什么弹性父级高度不随子级增长？
我可以使用display:block来实现它，但我希望它是灵活的。
html,body{
height:100%;
}
.grand-parent{
height:100%;
overflow:auto;
display:flex;
}
.parent{
display:flex;
flex-direction:column;
min-height:100%;
flex-shrink:0;
width:100%;
}
.child{
height:1500px;
width:10
浏览 0提问于2018-08-14得票数 2
回答已采纳
1回答
我正在尝试在Vuetify的列表、菜单或组合框中插入页脚。它们都是差不多的。我尝试了所有可能的css解决方案，但没有解决方案。
这就是我想要的，但我想让底部的按钮在底部静态可见，即使是滚动：
无论我在什么元素上应用样式，常规固定css解决方案都不起作用。
这是我试图实现它的combobox：
<v-combobox
style="min-width: 260px;"
dense
:value="item.description"
:items="products"
item-text=&
浏览 0提问于2018-08-29得票数 2
1回答
我正在尝试对来自vuetify组件的列表组应用一个活动类。 问题是它只将类应用于列表的“标题”，而不是抽屉(参见vuetify上的扩展列表列表)。 <v-list>
<v-list-group
v-for="item in items"
:key="item.title"
class="my-1 mx-2 primary--text"
color="#F5F5F5"
no-action
outlined
浏览 4提问于2021-09-14得票数 0
回答已采纳
1回答
当屏幕高度改变时，项目容器滚动
、、、、
这是我的网站的结构，它由一个视频播放器和设置部分组成，并列出了一些通知。当屏幕高度改变时，我需要添加项目容器滚动。只有具有通知列表的类PreviewWrapper的容器才能在屏幕高度变化时滚动。你能帮我解决这个问题吗？
浏览 6提问于2022-09-11得票数 0
2回答
我在这里有一个列表项目，我正在循环得到一个图标列表。现在，我试图创建一个计算属性，如果我是我的$route.params.page === 'something'，那么第一个图标将被高亮显示，如果我是我的$route.params.page === 'something else'，第二个图标将被高亮显示等等。但我不知道该怎么做。
new Vue({
el: '#app',
data() {
return {
iconActions: [{
icon: 'android'
浏览 0提问于2019-12-18得票数 0
回答已采纳
1回答
<v-menu attach="#user-filters" offset-y class="user-filters">
<template v-slot:activator="{ on, attrs }">
<div class="dropdown" v-bind="attrs" v-on="on">User Name</div>
</template>
<v-list id="user-filters"
浏览 0提问于2021-02-22得票数 0
1回答
正如我在上面的标题中所说的，我如何在Vuetify中为列表添加活动状态？我想要应用一个主要背景，就像他们在文档中所做的那样： ? 我的代码： <template>
<v-navigation-drawer width="300px" :clipped="$vuetify.breakpoint.lgAndUp" app>
<v-list nav expand>
<v-list-group
v-for="(item, i) in items"
浏览 14提问于2020-08-09得票数 0
1回答
如何在列表末尾显示组件？假设我有一个包含如下对象的列表： items: [
{name: 'Single Column', id: 1},
{name: 'Double Columns', id: 2},
{name: 'Triple Columns', id: 3},
{name: 'Custom', id: 0}
], 使用v-for显示列表的内容非常简单(请注意，这里我使用的是Vuetify )： <v-list>
<v-list-item
浏览 15提问于2021-03-28得票数 2
回答已采纳
我有一个带有v-list的flexbox。我的问题是，在v-list中有一些文本没有换行。我看到以下几点：
看起来包含列表的部分在宽度上无限增长，这就是为什么它不会换行的原因。
我在上有一个CodePen，它演示了这个问题。
JAVASCRIPT：
new Vue({
el: '#app',
vuetify: new Vuetify(),
props: {
source: String,
},
data: () => ({
selectedItem: null,
flattened: [
{
浏览 25提问于2020-07-31得票数 2
回答已采纳
2回答
这就是我所指的页面：
我在页面中间有一个浮动的div，它是我的“content”div。在这里面我有3个div，我的“内容框”，并排，每个占33%的空间。
当您从第一个内容框中进行搜索时，它会返回一些结果，并且第二个内容框变得可见。从那里，当你点击一个单词时，第三个内容框就会显示一些更多的信息。
我的问题是，当页面缩小，或者一个单词有很多信息时，第二个和第三个框有时会溢出主内容框。我已经看过CSS的overflow属性，但我似乎不能按照我想要的方式来获得它。它不应该在主内容框上溢出。
在主内容框上将overflow设置为auto时会发生什么:滚动条显示并滚动整个内容区域。
我希望发生的事情:在
浏览 0提问于2012-06-05得票数 0
回答已采纳
我正在使用Vuetify和电子制作一个应用程序来帮助我完成工作中的某些任务。我已经禁用了browserWindow框架，并使我的标题与一个按钮，以关闭窗口的可拖动区域。我正在使用电子虚拟模板。
vue init vuetifyjs/electron
我的问题是滚动条一直到顶部，但我希望它低于我的固定标题。
我尝试过在html、body、app div和content标签上播放溢出属性，但我没有成功。
我怎样才能做到这一点？
浏览 2提问于2018-01-16得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
