vue （mintUI）上拉加载

第一步：首先安装好mint UI

第二步：再引入到 main.js中 

 import Mint from 'mint-ui';
 Vue.use(Mint);

第三步：找到css再导入到main.js中

import 'mint-ui/lib/style.css'

第四步：打开Mint UI 找到这个属性

第五部：把这个例子引入进去

<ul
  v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10">
  <li v-for="item in list">{{ item }}</li>
</ul>
//以上的 list 代表的是你自己定义的数组或者是ajax 获取过来数据
//loading  这是自己定义的 要在data里面声明一下     loading:false
//loadMore这个是官网的一个方法 引进去就好了

第六步：因为官网例子没有加载动画效果的所以在这里顺便导入个加载动画组件

 //打开加载
 _this.$indicator.open({
      text: '加载中....',
      spinnerType: 'fading-circle'
  });
 //关闭加载
_this.$indicator.close();
//这个是在网上找到的一个加载动画效果

第七部：

    //写入methods中
    loadMore() {
      var that = this
      if(that.arr.length==that.brr.length){
        that.$indicator.open({
          text: '数据全部加载完',
          spinnerType: 'fading-circle'
        })
        setTimeout(function () {
          that.$indicator.close();
          that.loading = true;
        }, 500)
      }else{
        console.log(that.arr)
       //brr是data中声明的空数字组
       //a：0
       //b:20   这是为了控制一次出来多少条数据
        for (let i = that.a; i < that.b; i++) {
          that.brr.push(that.arr[i])
        }
        that.a += 20
        that.b += 20
        that.$indicator.open({
          text: '加载中....',
          spinnerType: 'fading-circle'
        })
        this.loading = false;
        setTimeout(function () {
          that.$indicator.close();
        }, 500)
      }
    },

开始修改和整个代码

这是刚进去出来的效果

这是加载后面数据的样子

这是我的数据加载完成后的效果