vue懒加载

最新推荐文章于 2025-05-13 11:07:43 发布

晴天Smile

最新推荐文章于 2025-05-13 11:07:43 发布

阅读量829

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/liang377122210/article/details/76849786

vue 专栏收录该内容

30 篇文章

订阅专栏

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

            },