elementui無限動態加載分頁

第一步：在mail.js中引入

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

 

第二步：安裝 

cnpm install vue-infinite-scroll --save

 

第三步：使用

<div class="schoolPlatformGroup"
             v-infinite-scroll="loadMore"
             infinite-scroll-disabled="scrollDisabled"
        >

          <ul style="list-style-type:none"
              v-for="(data,index) in cameraList">
            <el-tag  style="float: left;color: #409eff;z-index: 999;margin-top: 2px;">{{data.id}}</el-tag>
            <li :id="'platform'+data.id" class="platformNameTag"
                style="padding: 4px;margin-left: 40px;margin-right: 10px;background: #ffffff;"
                @click="clickPlatform(data.id)">【{{index+1}}】{{data.name}}</li>
          </ul>

          <el-button v-if="loading" style="margin-left: 90px;margin-bottom: 10px" type="warning" plain>數據加載中...</el-button>
          <el-button v-if="noMore" style="margin-left: 80px;margin-bottom: 10px" type="warning" plain>沒有更多數據了</el-button>

schoolPlatformGroup樣式，要有設置滾動條

.schoolPlatformGroup {
    min-width:220px;
    height: 920px;
    overflow-y: auto;
    margin-top: 10px;
    margin-left: -23px;
  }
  .schoolPlatformGroup::-webkit-scrollbar {
    width: 10px;
    height: 1px;
  }
  .schoolPlatformGroup::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(52, 163, 242, 0.48);
  }
  .schoolPlatformGroup::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
  }

 

數據變量

 //滾動條分頁
      cameraList: [],
      scrollbarPage: 1,
      scrollbarLimit: 30,
      scrollbarTotal: 0,
      loading: false,

 

計算屬性

computed: {
    noMore () {
　　　　//this.cameraList.length，此長度是每次請求相機數據疊加的，this.scrollbarTotal是后台返回的數據總數
      return this.cameraList.length > this.scrollbarTotal
    },
    scrollDisabled () {
      //scrollDisabled == false,可以滾動
      return this.loading || this.noMore
    }
  },

接口請求數據

v-infinite-scroll="loadMore"組件中的loadMore方法，每次滾動到末尾就會自動觸發此方法

loadMore() {
      this.loading = true
      setTimeout(() => {
        console.log("loadloadloadloadloadloadloadloadloadloadloadloadloadloadloadload")
        this.scrollbarPage += 1
        //請求相機列表
        this.getCameraDataList(); this.loading = false
      }, 2000)
    },

 

 

//相機列表
    getCameraDataList(){
      this.$http({
        url: this.$http.adornUrl(`/risk/riskcamera/getList`),
        method: 'get',
        params: this.$http.adornParams({
          page: this.scrollbarPage,
          limit: this.scrollbarLimit,
        })
      }).then(({ data }) => {
        console.log("相機列表",data)
        if(data.data != null){
          //總數
          this.scrollbarTotal = data.data.total;
          //列表
          let list = data.data.records
          //this.cameraList = list;
          for(let i=0; i<list.length; i++){
            this.cameraList.push(list[i]);
          }
        }
      })
    },

 

參考elementui中的官網