[Vue.js2] 무한스크롤 적용하기

사용한 플러그인: vue-observe-visibility

npm i vue-observe-visibility

https://www.npmjs.com/package/vue-observe-visibility

vue-observe-visibility

 

 

<template>
  <ul>
      <li 
      	v-for="(list, index) in stock" 
      	:key="index"
        v-observe-visibility="stock.length - 1 ? observeOptions : false">
      </li>
  </ul>
</template>

<script>
export default {
    data() {
        return {
            observeOptions: {
                callback: this.changeVisibility,
                once: true,
                throttle: 0,
                throttleOptions: {
                    leading: "hidden"
                },
                intersection: {
                    rootMargin: "30px 0 0 0",
                    threshold: 0.01
                }
            }
        }
    },

    methods: {
        changeVisibility(isVisible, entry) {
            if (entry.isIntersecting) { //boolean값
                //더보기 함수 실행()
            }
        }
    }
}
</script>