Vue 드롭다운 스크롤 로드 데이터의 예

웹 프로젝트는 데이터를 스크롤하여 불러오는 기능을 자주 사용하는데, 오늘 풀을 심겠습니다Vue-infinite-loading 이 플러그인, 사용 방법을 설명해 주세요!

1단계: 설치

npm install vue-infinite-loading --save

2단계: 참조

import InfiniteLoading from 'vue-infinite-loading';

export default {
  components: { InfiniteLoading }
}

3단계: 사용

1. 기본 사용법

<template>
　　<div> 　　　　<p v-for="item in list">　　　　　　<span v-text="item"></span> 　　　　</p> 　　　　<!--infinite-loading ， ！--> 　　　　<infinite-loading @infinite="infiniteHandler"></infinite-loading> 　　</div></template><script>　　import InfiniteLoading from 'vue-infinite-loading';

　　export default {
  　　data() {
    　　return {
      　　list: []
    　　};
  　　},
  　　methods: {
    　　infiniteHandler($state) {
      　　//  1 
      　　setTimeout(() => {
        　　let temp = [];
        　　for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
          　　temp.push(i);
        　　}
        　　this.list = this.list.concat(temp);
        　　$state.loaded();
      　　}, 1000);
    　　},
  　　},
  　　components: { InfiniteLoading }
　　}</script>

2. 페이지 나누기

<template>
    <div>
          <ul>
              <li class="hacker-news-item" v-for="(item, key) in list"></li>
        </ul>
        <infinite-loading @infinite="infiniteHandler">
            <span slot="no-more">No more Data</span>
        </infinite-loading>
    </div>
</template>    

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

    export default {
          data() {
            return {
                  list: []
            };
          },
          methods: {
            infiniteHandler($state) {
                let api="http://xxx.com/xxx";
                // api 
                  axios.get(api, {
                    params: {
                        //  （10 ）
                          page: this.list.length / 10 + 1,
                    },
                  }).then((response) => {
                    if (response.data.length) {
                        // response.data 
                          this.list = this.list.concat(response.data);
                          $state.loaded();
                          if (this.list.length / 10 === 10) {
                              //  10 ， 
                            $state.complete(); 
                          }
                    } else {
                          $state.complete();
                    }
                  });
            }
          },
          components: { InfiniteLoading }
    };
</script>

설명: $state: 이 구성 요소는 이벤트 매개 변수 $state를 이벤트 프로세서에 전달하여 불러오는 상태를 변경합니다. $state 매개 변수는loaded 방법,complete 방법,reset 방법 세 가지 방법을 포함합니다.

loaded 방법은 데이터를 불러올 때마다 애니메이션 재생을 멈추고 다음 터치를 할 준비가 되어 있습니다

complete 방법은 완전한 무한 불러오기를 완성하는 데 사용되며, 이 구성 요소는 더 이상 스크롤 작업을 처리하지 않습니다.loaded에서complete 방법을 호출할 때 이 방법을 영원히 호출하지 않으면, 이 구성 요소는 사용자의 결과 메시지를 표시하고, 그렇지 않으면, 더 이상 사용자 메시지가 없고, slot에 따라 다른 내용을 설정할 수 있습니다

reset 방법은 구성 요소를 원래의 상태로 되돌리는 것이다

3. 조건용법

<template>
    <div class="hacker-news-list">
          <div class="hacker-news-header">
            <!-- -->
            <select v-model="tag" @change="changeFilter()">
                  <option value="story">Story</option>
                  <option value="history">History</option>
            </select>
              <!-- -->
            <button @click="changeFilter()"> </button>
          </div>
          <ul>
              <li class="hacker-news-item" v-for="(item, key) in list"></li>
           </ul>
           <!--  ref="infiniteLoading"-->
          <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
            <span slot="no-more">No more data</span>
          </infinite-loading>
    </div>
</template>

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

    export default {
          data() {
            return {
                  list: [],
                  tag: 'story',
            };
          },
          methods: {
            infiniteHandler($state) {
                  const api="http://xxx.com/xxx";
                  // api 
                  axios.get(api, {   
                    params: {
                        //  
                          tags: this.tag,  
                          page: this.list.length / 10 + 1,
                    },
                  }).then(({ data }) => {
                    if (data.result.length) {
                          this.list = this.list.concat(data.result);
                          $state.loaded();
                          if (this.list.length / 20 === 10) {
                            state.complete();
                          }
                    } else {
                          $state.complete();
                    }
                  });
            },
            // 
            changeFilter() {
                  this.list = [];
                  this.$nextTick(() => {
                    this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
                  });
            },
          },
          components: { InfiniteLoading }
    }
</script>

공식 링크:https://peachscript.github.io/vue-infinite-loading/
GitHub 링크:https://github.com/PeachScript/vue-infinite-loading
이상은 바로 Vue가 아래로 스크롤하여 데이터를 불러오는 예시를 실현하는 상세한 내용입니다. 더 많은 Vue 아래로 스크롤하여 데이터를 불러오는 것에 관한 자료는 저희 다른 관련 글을 주목해 주십시오!