infinite loading

infinite loading

---

vue에서 infinite-loading기능을 사용해보았다.

설치

npm install v3-infinite-loading

main.js

import InfiniteLoading from "v3-infinite-loading";
import "v3-infinite-loading/lib/style.css";
...
app.component("infinite-loading", InfiniteLoading);
...

코드

해당 코드에서는 개인 Spring 프로젝트를 이용하여 json 값을 리턴하였음.

[
  {numData:1,stringData:'hello'},
  {numData:1,stringData:'hello'},
  ...
]

Infinite.vue

<div class="result" v-for="comment in comments" :key="comment">
    <div>{{comment.numData}}</div>
    <div>{{comment.stringData}}</div>
</div>
<InfiniteLoading @infinite="load"></InfiniteLoading>

<script setup>
import { ref } from 'vue';
import InfiniteLoading from "v3-infinite-loading";
// import "v3-infinite-loading/lib/style.css";

let comments = ref([])
let page = 1
const load = async $state => {
    try {
        const response = await fetch(`http://127.0.0.1:10000/list?page=${page}`)
        const json = await response.json()
        if (json.length < 10) $state.complete()
        else {
            comments.value.push(...json)
            $state.loaded()
        }
        page++
        console.log('hi' + json);
    } catch (error) {
        $state.error()
    }
}
</script>
<script>
export default {
    components: {
        InfiniteLoading
    },
    data() {
        return {
            topicData: [],
            limit: 0
...

간단히 생각하면, 스크롤을 내려 InfiniteLoading로 이동시, load가 실행된다.
load 안에는 fetch를 통해 외부에서 데이터를 받아 comments에 추가, load한다.