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++;

            },