gpt4 book ai didi

javascript - Vue 设置 IntersectionObserver

转载 作者:搜寻专家 更新时间:2023-10-30 22:38:00 24 4
gpt4 key购买 nike

我正在尝试为无限滚动列表设置一个 IntersectionObserver。我想检查 IntersectionObserver 是否已到达列表的最后一项。

到目前为止,我的 IntersectionObserver 设置如下所示:

mounted() {
const config = {
treshold: 1
};

const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) console.log(entry.target);
});
}, config);

observer.observe(this.lastRenderedDeal());
}

我的列表项呈现如下:

<deal :deal="deal"
:key="index"
ref="deals"
v-for="(deal, index) in deals"
</deal>

为了获取最后一个 renderedDeal,我在交易中使用了 ref:

lastRenderedDeal() {
const deals = this.$refs.deals;
return deals ? deals[deals.length - 1].$el : null;
}

这适用于初始设置并会触发。问题是,当我想要无限滚动时,我需要继续附加到交易列表。所以我的 lastRenderedDeal 会不断更新以反射(reflect)附加到我的列表中的最后一笔交易。

这种 react 似乎没有传递给 observer.observe 方法。它只拾取我的初始元素。这似乎很明显,因为它已在 mounted Hook 中实例化,但我该如何处理呢?

我是否需要为交易设置观察者并再次调用观察者.observe?如果是这样,我可以简单地告诉它替换最初观察到的项目吗?

最佳答案

你可以观察一个假人 <div>它总是在列表的底部。您可能需要设置 key<div> 上以确保 Vue 不会在每次渲染组件时重新创建元素。

我总是喜欢制作一个通用的、可重用的组件来捆绑这种行为。这是我的看法:

const InfiniteScroll = {
render(h) {
return h('div', [
...this.$slots.default,

// A dummy div at the bottom of the list which we will observe.
// We must set a key on this element so that Vue reuses
// the same element it initially created upon each rerender.
h('div', {
key: 'footer',
ref: 'footer',
style: {
height: '1px'
},
}),
]);
},

mounted() {
this.observer = new IntersectionObserver(entries => {
// We only have one entry. Is it visible?
if (entries[0].intersectionRatio > 0) {
this.$emit('trigger');
}
});

// Observe the dummy footer element
this.observer.observe(this.$refs.footer);
},
};

new Vue({
el: '#app',
components: {
InfiniteScroll,
},
data: {
items: [],
},
created() {
this.loadMore();
},
methods: {
loadMore() {
for (let i = 0; i < 20; i++) {
this.items.push(this.items.length + 1);
}
},
},
});
body {
margin: 0;
}

.item {
border-bottom: 1px solid #eee;
padding: 10px;
}
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<div id="app">
<infinite-scroll @trigger="loadMore">
<div v-for="item of items" class="item">{{ item }}</div>
</infinite-scroll>
</div>

关于javascript - Vue 设置 IntersectionObserver,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47922372/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com