vue下拉触底加载插件vue-infinite-loading

最新推荐文章于 2023-06-12 10:05:16 发布

点点关注不迷路

最新推荐文章于 2023-06-12 10:05:16 发布

阅读量264

点赞数 1

文章标签： vue.js 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_51526447/article/details/128891912

版权

npm install vue-infinite-loading -S

import InfiniteLoading from 'vue-infinite-loading'

  components: {
    InfiniteLoading
  },

              <infinite-loading @infinite="infiniteHandler"  :distance="200" ref="infiniteLoading" class="infinite-loading-wrap">
                <div v-if="pageNum === 1" slot="spinner"></div>
                <div v-else slot="spinner" class="loading-spinner">
                  <div class="dot"></div><div class="dot"></div><div class="dot">
                </div>
                </div>
                <div slot="no-results" class="empty-font">当前数据为空</div>
                <div slot="no-more" class="empty-font">我们是有底线的</div>
              </infinite-loading>

methods

    infiniteHandler($state) {
      this.request({
        url: '/news/page',
        method: 'get',
        params:{
          newclass:this.activeName,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          isrelease: 1,
        }
      }).then((res) => {
        if (res.records.length > 0) {
          this.pageNum+=1;
          console.log("到底了")
          console.log(res)
          this.tableData =[...this.tableData,...res.records];
          $state.loaded();
        } else{
          console.log(res.records.length)
          $state.complete();
          console.log('结束')
        }
      });
    },