Skip to content

Instantly share code, notes, and snippets.

@ycmjason ycmjason/a.html
Last active Jun 6, 2019

Embed
What would you like to do?
<div ref="container">
<Card v-for="(card, i) of cards" ref="cards">
<IntersectionObserver :getTarget="() => this.$refs.cards[i]" @intersect="liftCard" @disintersect="unliftCard" />
...
</Card>
</div>
<!-- vs -->
<div ref="container">
<IntersectionObserver :getTarget="() => this.$refs.cards" @intersect="liftOrUnliftCard" />
<Card v-for="(card, i) of cards">
...
</Card>
</div>
<script>
export default {
methods: {
liftOrUnliftCard (entries) {
entries.filter(({ isIntersecting }) => isIntersecting).forEach(this.liftCard)
entries.filter(({ isIntersecting }) => !isIntersecting).forEach(this.unliftCard)
},
liftCard () { /* lift the card */ },
unliftCard () { /* unlift the card */ },
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.