vue的爬坑之路（六）之----基於vue-cli 無限滾動插件無限加載

注：vue-infinite-loading2.0只能在Vue.js2.0中使用。若是你想在Vue.js1.0中使用，請安裝vue-infinite-loading1.3版本

npm install vue-infinite-loading --save

es6模塊導入方式

import InfiniteLoading from 'vue-infinite-loading';
export default {
  components: {
    InfiniteLoading,
  },
};

Template

1. 在你的模板中，用v-for建立一個列表
2. 將InfiniteLoading組件放在列表的底部；
3. 將InfiniteLoading組件的ref屬性設置爲infiniteLoading，由於要用它來觸發事件。
4. 爲InfiniteLoading組件建立並綁定一個加載回調函數。
5. solt='no-more'自定義了當沒有更多數據時的提示內容。

基礎佈局例子：

 

<infinite-loading v-on:infinite="droplist" ref="infiniteLoading" spinner="bubbles"><span style="font-size:20px;" slot="no-more">沒有更多數據了！</span></infinite-loading>

 

Script

 1 droplist: function ($state) { 5       this.$http.get('接口',{ 參數}).then((response) => {
 6            if('order_data' in response.data.data){
　　　　　　　　　　　//this.orderData 是聲明的數組變量，用於存數據 9                 this.orderData =this.orderData.concat(response.data.data.order_data)
10                 $state.loaded()
11            } else {
12                 $state.complete()
13            }
14      })
22  }