移动端下滑分页v-infinite-scroll 插件使用（3）

简单粗暴 直接上代码~如有意见或建议欢迎留言哈 ！一起加油???

1.安装vue-infinite-scroll

npm i vue-infinite-scroll -S

2.main.js中引入

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

3.项目中使用

项目中使用了vux组件库 这里使用了vux的加载提示LoadMore

import { LoadMore } from 'vux'
components:{ LoadMore },

data中配置参数

页面中使用

接下来就是调用列表接口

loadMore() {
      let that = this;
      this.busy=true;
      this.loadingShow=true;
      setTimeout(()=>{
        this.init();
      },1000)
    },

init(){
      let that=this;
      ====================这边封装的axios方法  你可以用自己的ajax请求去调接口====================
      this.$api.get('/你自己的接口地址',
        {
          "token":this.token,
          "page_index":that.page,
          "page_size":that.pageSize
        },1,
        response => {
          console.log(response.data)
          if(response.data.rspCode =="000000") {
            that.AllJobLog=that.AllJobLog.concat(response.data.resultData.list);
            if(response.data.resultData.total==0){
              that.$vux.toast.text('暂无数据', 'middle');
              this.loadingShow=false;
              return;
            }
            else if(that.page>=response.data.resultData.pages){
              this.loadingShow=false;
              this.busy = true;
              that.page++;
            }else{
              this.page ++;
              this.busy = false;
            }
          } else {
            this.$vux.toast.text(response.data.rspMsg,'middle');
          }
        })
    },