基于 vue 的elementui的无限滚动组件

 需要安装elemnet，安装好就可以使用。

真是项目案例，复制之间使用，记得把改接口。

 

<template>
<!-- 违法代码 -->
 <div class="infinite-list-wrapper" style="overflow:auto">
     <div id="zi" 
          class="list"
          v-infinite-scroll="load"
          infinite-scroll-disabled="disabled">
       <div class="code" v-for="item in list" :key="item.id">
          <el-row type="flex" class="row-bg" justify="space-between" >
            <el-col :span="7">
                违法代码
            </el-col>
            <el-col :span="17">
               {{item.code}}
            </el-col>
         </el-row>
         <el-row type="flex" class="row-bg" justify="space-between" >
            <el-col :span="7">
                违法情况
            </el-col>
            <el-col :span="17">
              {{item.content}}
            </el-col>
         </el-row>
          <el-row type="flex" class="row-bg" justify="space-between" >
            <el-col :span="7">
                违法时间
            </el-col>
            <el-col :span="17">
              {{item.upDateTime}}
            </el-col>
         </el-row>
        
       </div>
         <p v-if="loading" class="hint">加载中...</p>
         <p v-if="noMore"  class="hint">没有更多了</p>    
     </div>
   </div>
</template>
<script>
export default {
  data(){
      return{
         id:"",
         list:[
            //  {id:"1",code:"1031",content:"罚款200元法库999999999999999999",},
            //  {id:"2",code:"1098",content:"罚款400元在罚款罚款发困安咯阿拉帕",},
            //  {id:"3",code:"1031",content:"罚款200元法库999999999999999999",},
            //  {id:"4",code:"1098",content:"罚款400元在罚款罚款发困安咯阿拉帕",},
         ],
         // 总条数
         total:'',
         loading: false,
         // 当前条数
         pageSize:5,
         // 当前页数
         pageNum:0
      }
  },
  computed:{
     noMore(){
      //   当循环添加的数据条数大于或等于总条数时停止加载
        return this.list.length >= this.total
     },
     disabled () {
        return this.loading || this.noMore
    }
  },
  methods: {
      load(){
       this.loading=true
      // 改变页数并从新赋值
       this.pageNum=this.pageNum+1
       console.log(4444,this.pageNum)
        setTimeout(()=>{
            this.$axios.get(`http://192.168.124.25:8090/wf/search?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,{ withCredentials: true }).then(res=>{
            if(res.data.info==="success"){
                // 循环添加数据forEach方法
               res.data.data.list.forEach(item => {    
                    this.list.push(item)
               })
               // 循环添加数据for需循环方发
               // for(var i = 0; i < list.length; i++){
               //    then.list.push(list[i])
               // }
               this.loading=false
               // 获取总数
               this.total = res.data.data.total
            }
         })     
        },1000)
     },
   },
   //  请求违法代码接口
    created(){
       this.load()
    }
}
</script>

<style scoped>
  #zi{
     width: 90%;
     margin: 0 auto;
     margin-bottom: 5rem;
  }
  .row-bg{
     /* height: 2rem; */
     line-height: 1.8rem;  
  }
  .code{
      border-bottom: 1px solid #B4B4B4;
      padding: 0.5rem;
  }
   .hint{
      text-align: center;
      color: red;
    }
</style>