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

droplist: function ($state) { 5       this.$http.get('接口',{ 参数}).then((response) => {
           if('order_data' in response.data.data){
　　　　　　　　　　　//this.orderData 是声明的数组变量，用于存数据 9                 this.orderData =this.orderData.concat(response.data.data.order_data)
                $state.loaded()
           } else {
                $state.complete()
           }
     })
 }