element-ui 使用v-infinite-scroll,高度适应页面大小
时间: 2023-06-23 15:09:22 浏览: 99
使用 `v-infinite-scroll` 实现无限滚动时,可以通过设置容器元素的高度来适应页面大小。具体做法如下:
1. 在容器元素上设置样式 `height: 100vh;`,使其高度占满整个页面。
2. 在 `v-infinite-scroll` 绑定的方法中,每次加载数据后,判断容器元素的高度是否小于页面高度。如果小于,则将容器元素的高度设置为页面高度,保证容器元素的高度和页面高度一致。
示例代码如下:
```html
<template>
<div class="container" v-infinite-scroll="loadData">
<!-- 数据列表 -->
</div>
</template>
<script>
export default {
methods: {
loadData() {
// 加载数据
// ...
// 判断容器元素的高度是否小于页面高度
const containerHeight = document.querySelector('.container').clientHeight;
const windowHeight = window.innerHeight;
if (containerHeight < windowHeight) {
// 将容器元素的高度设置为页面高度
document.querySelector('.container').style.height = windowHeight + 'px';
}
}
}
}
</script>
<style>
.container {
height: 100vh;
overflow: auto;
}
</style>
```