- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试为无限滚动列表设置一个 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/
电梯导航也被称为锚点导航,当点击锚点元素时,页面内相应标记的元素滚动到视口。而且页面内元素滚动时相应锚点也会高亮。电梯导航一般把锚点放在左右两侧,类似电梯一样。常见的电梯导航效果如下,比如一些官方文档
我正在使用IntersectionObserver polyfill在图 block 上延迟加载图像。问题是我有几千个图 block ,每个图 block 上都有一个需要延迟加载的图像。 以前,我使用
我有一个包含许多方形图像(相同宽度和高度)的页面,其中大小由 width:50% 控制。他们将延迟加载使用 IntersectionObserver 的 lozad.js ( https://www.
在单页应用程序中,元素经常被删除和替换。在从 DOM 中移除的元素上可能有一个 IntersectionObserver(或任何其他类型) 对于我从不关心的事件,因为它们是在目标上绑定(bind)和触
我如何将额外的参数传递给 IntersectionObserver?我正在尝试为 Vue 创建一个 lazyload 插件。它像这样工作正常,但我也希望能够调用提供的指令函数。 const lazyl
我创建了一个用户界面,当用户向下滚动页面时,会出现 4 个带有“淡入”效果的网格框,但是当我们向上滚动页面时,再次向下滚动页面时,动画再次出现,而准确地说,我不想让动画做多次,而只是在盒子出现一次时。
我想为具有以下属性的元素创建动画: 它在 时为元素设置动画它进入视口(viewport) 如果元素离开视口(viewport)然后再次进入它应该是再次动画 根据滚动方向/相交边(从顶部或底部),动画应
目标: 我想对一组在页面加载时相交的元素执行一个操作,并单独处理所有其他元素(当前未相交)。 问题: 每个观察者都有自己的回调,我无法同步获得一组结果。 可能的解决方案: 如果最初可以询问相交观察者元
我正在尝试构建我的 gatsby 项目,但由于 IntersectionObserver 未被识别,我无法构建。我在 InView 组件中使用了intersectionObserver: import
我有一个 div,我想在它滚动到视口(viewport)时更改颜色,我正在尝试使用新的 intersectionObserver 来实现这一点方法。我已经在配置回调中设置了我的参数,但我似乎无法让观察
我有以下方法: componentDidLoad() { this.image = this.element.shadowRoot.querySelector('.lazy-i
我正在使用 IntersectionObserver在元素进入视口(viewport)时向元素添加和删除类。 而不是说“当 X% 的元素可见时 - 添加此类”我想说“当 X% 的元素可见或当 X% 的
当目标元素距离交叉点根 100px 时,我想拦截一个交叉点 为了做到这一点,我将 rootMargin 设置为“100px 0px 100px 0px”。 在这个例子中,当目标元素的第一个像素(红色框
有什么方法可以强制更新/运行 IntersectionObserver实例?默认情况下,当视口(viewport)发生更改时,将执行回调。但是我正在寻找一种在其他事件发生时执行它的方法,比如元素的变化
设置rootMargin的代码如下所示。 let observerOptions = { root: null, rootMargin: "100px", threshold:
我正在尝试编写一个测试,当元素在视口(viewport)中时断言某些内容。 我正在使用 IntersectionObserver API,事实证明,对观察者的调用是在浏览器可以进行时完成的。 所以问题
我正在观察消息并使用消息时间戳来跟踪这些观察结果。这些观察有一个重要条件:如果页面上没有客户端事件(光标不移动,或者他没有输入任何内容),则跟踪时间戳不应更新。客户端经常收到新消息,但没有任何事件。这
我有一个 IntersectionObserver 观察一个 img,当根设置为 null(视口(viewport))时它工作得很好。但是,当我将根元素设置为另一个 img 元素时,观察者无法检测到两
试图理解 intersectionObserver API 中的一个怪癖。 如果观察到的元素部分出现在屏幕上但未达到选项中定义的阈值,我希望回调不会触发,但它确实。试图了解为什么或如何在页面加载时阻止
我正在尝试为无限滚动列表设置一个 IntersectionObserver。我想检查 IntersectionObserver 是否已到达列表的最后一项。 到目前为止,我的 IntersectionO
我是一名优秀的程序员,十分优秀!