写一个Vue监听滚动到可视位置再加载的程序
时间: 2023-03-22 10:02:14 浏览: 74
以下是一个Vue监听滚动到可视位置再加载的程序:
```html
<template>
<div>
<div v-for="(item, index) in items" :key="index">
<div v-if="isVisible(index)">
{{ item }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['item 1', 'item 2', 'item 3', 'item 4'],
visibleIndexes: []
};
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
isVisible(index) {
return this.visibleIndexes.includes(index);
},
handleScroll() {
const windowHeight = window.innerHeight;
const scrollTop = document.documentElement.scrollTop;
const offset = 200;
this.items.forEach((item, index) => {
const el = document.getElementById(`item-${index}`);
if (el) {
const rect = el.getBoundingClientRect();
const isVisible = rect.top < windowHeight - offset;
if (isVisible && !this.visibleIndexes.includes(index)) {
this.visibleIndexes.push(index);
}
}
});
}
}
};
</script>
```
该程序使用 `v-for` 渲染一个包含多个 `div` 元素的列表,每个 `div` 元素根据其索引判断是否应该显示。在组件挂载后,程序会监听滚动事件,当某个 `div` 元素滚动到可视位置时,该 `div` 元素会被显示出来。
注意:该程序仅为示例程序,实际应用时需要根据需求进行修改和优化。