Web專案經常會用到下拉滾動載入資料的功能，今天就來種草 vue-infVhjDHinite-loading 這個外掛，講解一下使用方法！

第一步：安裝

npm install vue-infinite-loading --save

第二步：引用

import InfiniteLoading from 'vue-infinite-loading';

export default {
  components: { InfiniteLoading }
}

第三步：使用

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為你請求介面返回的陣列列表
    &VhjDH
 
nbsp; this.list = this.list.concat(response.data);
     $state.loaded();
     if (this.list.length / 10 === 10) {
      // 這裡是載入了10頁資料，設定不在載入
     $state.complete(); 
   &程式設計客棧nbsp;  }
   www.cppcns.com } 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();
                VhjDH          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下拉滾動載入資料的資料請關注我們其它相關文章！