vue懒加载

 

import  infiniteScroll  from  'vue-infinite-scroll'

Vue. use( infiniteScroll)

vue全局引入

< div  class= "grid-demo"  v-if= "active_tab=='idemo'"  v-infinite-scroll= "getdata"  infinite-scroll-disabled= "busy"  infinite-scroll-distance= "30" >

< ul >

                     < li  class= "web-summar"  v-for= "v in list" @ click= "gotolink(v.fdcUrl)" >

                      

  </ li >

</ ul >

</ div >

         < div  class= 'loading'  v-show= 'loading' >

             < p >

                 < img  src= '../assets/img/load/loading.gif' >

                拼命加载中...

             </ p >

         </ div >

         <!--无产品-->

         < div  class= "mui-none"  v-if= "dataNull" >

             < img  src= "../assets/img/load/wdd.png"  class= "mui-none-img" >

             < p  class= "mui-none-ding" >还没有任何产品哦 </ p >

         </ div >

               loading:  true,

                 dataNull:  false,

                 busy:  false,

                 page:  1,

                 num:  10

async  getdata() {

//                this.$http.post('/mobile/Creditdata/Getlist',{page:1,num:30}).then(res=>{

//                    this.list=res.data.data;

//                    console.log(this.list);

//                })

                 this. busy =  false;

                 let  vorderby = {

                     field:  'ID',

                     asc:  'desc',

                };  //排序

                 let  res =  await  this. $http. post( '/mobile/Creditdata/Getlist', { page:  this. page,  num:  this. num,  orderby:  vorderby})

                 if ( this. page ===  1) {

                     this. list =  res. data. data;

                }  else {

                     this. list =  this. list. concat( res. data. data);

                }

                 if (!! res. data. data &&  res. data. data. length >=  this. num) {

                     this. loading =  true;

                     this. busy =  false;

                }

                 this. page++;

            },