[Vue.js] Vue infinite loading 무한 스크롤 사용 (with. Spring Boot)

Vue.js

 

1. vue-infinite-loading 설치

npm install vue-infinite-loading -S

 

2. 코드

<template>
    <div class="container">
        <div class="panel-body">
            <ul class="list-group">
                <li class="list-group-item" v-for="movie in movies">
                    <p class="list-group-item-text article-id">{{ movie.id }}</p>
                    <span class="badge">{{movie.writerName}}</span>
                    <a @click="go_read(movie.id)">{{ movie.subject }}</a>
                </li>
            </ul>
        </div>
        <infinite-loading @infinite="infiniteHandler" spinner="waveDots"></infinite-loading>
    </div>
</template>

<script>
import axios from 'axios';
import InfiniteLoading from "vue-infinite-loading";

export default {
    data(){
        return{
            movies: [],
            loadNum: 0
        }
    },
    methods : {
        go_read(idx){
            this.$router.push('/board/'+idx)
        },
        infiniteHandler($state) {
            axios.get('http://localhost:8088/board/list/'+this.loadNum,{
                headers: {
                    authorization: this.$store.getters.auth_token
                }
            })
            	.then(res => {
                    if(res.data.totalPages == this.loadNum){
                        $state.complete();
                    }else{
                        setTimeout(() => {
                            const data = res.data.content;
                            for(let key in data){
                                this.movies.push(data[key])
                            }
                            this.loadNum++;
                            $state.loaded();
                        }, 1000)
                    }
                })
                .catch(err => {
                    console.log(err)
                    alert('에러');
                    localStorage.clear();
                    this.$store.state.loginState = false;
                    this.$store.state.token = null;
                    this.$router.push('/');
                })
        }
    },
    components: {
        InfiniteLoading
    }
}
</script>

axios를 통해 Spring Boot 백엔드의 movie 데이터를 받아서 스크롤링한다.

spinner => default, spiral, circles, bubbles, waveDots 5가지

 

default spinner 적용된 게시판

 

.... 1초 로딩이 걸린 후 스크롤링됨