vue2.0無限滾動加載數據插件

 

做vue項目用到下拉滾動加載數據功能，由於選的UI庫（element）沒有這個組件，就用Vue-infinite-loading 這個插件代替，使用中遇到的一些問題及使用方法，總結作記錄！

安裝：npm install vue-infinite-loading –save

引入

ES6

import InfiniteLoading from 'vue-infinite-loading';

export default {
  components: {
    InfiniteLoading,
  },
};

CommonJS

const InfiniteLoading = require('vue-infinite-loading');

export default {
  components: {
    InfiniteLoading,
  },
};

1.用法一（基本用法）

Template

<div>
  <p v-for="item in list">
    Line:
    <span v-text="item"></span>
  </p>
  <!--infinite-loading這個組件要放在列表的底部，滾動的盒子里面！-->
  <infinite-loading @infinite="infiniteHandler"></infinite-loading>
</div>

Script

import InfiniteLoading from 'vue-infinite-loading';

export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    infiniteHandler($state) {
      setTimeout(() => {
        const 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,
  },
};

2.用法二（一般的分頁數據）

Template

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

Script

import InfiniteLoading from 'vue-infinite-loading';
import axios from 'axios';

export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    infiniteHandler($state) {
     const api="http://xxxx.com/xxx"
      axios.get(api, {   //api為你請求數據地址
        params: {
          page: this.list.length / 10 + 1,   //頁碼參數（10條每頁）
        },
      }).then((response) => {
        if (response.data.length) {
          this.list = this.list.concat(response.data);  //response.data為你請求接口返回的數組列表
          $state.loaded();
          if (this.list.length / 10 === 10) {
            $state.complete(); //這里是加載了10頁數據，設置不在加載
          }
        } else {
          $state.complete();
        }
      });
    },
  },
  components: {
    InfiniteLoading,
  },
};

$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>
    </select>
      <!--或者點擊改變-->
    <button @click="changeFilter()">搜索</button>
  </div>

  <ul>
      <li class="hacker-news-item" v-for="(item, key) in list"></li>
   </ul>
  <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">  <!--不要忘記設置這個 ref="infiniteLoading"-->
    <span slot="no-more">
      There is no more Hacker News
    </span>
  </infinite-loading>
</div>

Script

import InfiniteLoading from 'vue-infinite-loading';
import axios from 'axios';

export default {
  data() {
    return {
      list: [],
      tag: 'story',
    };
  },
  methods: {
    infiniteHandler($state) {
      const api="http://xxxx.com/xxx"
      axios.get(api, {   //api為你請求數據地址
        params: {
          tags: this.tag,  //改變的條件參數
          page: this.list.length / 10 + 1,
        },
      }).then(({ data }) => {
        if (data.hits.length) {
          this.list = this.list.concat(data.hits);
          $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,
  },
};

4.其他用法（特殊條件手動觸發）

在大多數情況下，我們希望立即為空列表加載數據，這也是該組件的默認行為。如果你只想控制第一次加載，你可以簡單地使用v-if和v-else指令來實現它,但是如果，在一些復雜的情況下，我們需要手動每三頁加載一次數據，我們可以使用該方法，

 

這里我不做詳細介紹。有這個需求的可以去看看官方文檔：vue-infinite-loading