vue的v-infinite-scroll上拉加载更多

1.安装v-infinite-scroll组件

npm i vue-infinite-scroll -S

2.在main.js引入

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

3.在页面中使用

1.参数含义

v-infinite-scroll=“loadMore” 加载需要执行的函数
infinite-scroll-disabled=“busy” 设置是否执行loadMore函数，false则执行，true则不执行
infinite-scroll-distance=“10” 这里10决定了页面滚动到离页尾多少像素的时候触发回调函数
infinite-scroll-immediate-check 默认值为true，该指令表示，应该在绑定后立即检查busy的值和是否滚动到底。假如你的初始内容高度不够，不足以填满可滚动的容器的话，你应设为true，这样会立即执行一次loadMore，会帮你填充一些初始内容。
infinite-scroll-listen-for-event 当事件在Vue实例中发出时，无限滚动将再次检查。
infinite-scroll-throttle-delay 检查busy的值的时间间隔，默认值是200，因为vue-infinite-scroll的基础原理是，vue-infinite-scroll会循环检查busy的值，以及是否滚动到底，只有当：busy为false且滚动到底，回调函数才会执行

2.html
//注意。高度那边得设置好，一定要限定高度（height：xxx; overflow-y:auto）load加载方法将在拉取底部时才会被执行。

<section
                    v-loading="loading"
                    v-infinite-scroll="videoMore"  
                    infinite-scroll-throttle-delay="1000"
                    :infinite-scroll-disabled="busy"
                    infinite-scroll-distance="10"
                    style="height: calc(100vh - 350px); overflow: auto"
                  >
                    <div
                      class="MaterialLocalPane_MaterialContainerLoading_29mr-"
                    >
                      <div v-if="videoList.length !== 0" class="up-mod-body">
                        <div style="margin: 15px 0">{{v}}</div>
                      </div>
                      <div class="nodata" v-if="videoList.length === 0">
                        暂无数据~
                      </div>
                    </div>
                  </section>

2.js
data

  data() {
    return {
      materpagr: {
        page: 1, //当前页数
        page_size: 10, //每页展示几个
      },
      busy: false, //是否执行loadMore函数
      loading: true, //加载层
      videoList: [], //数据列表
    };
  },

methods

   methods: {
    // 进入页面获取数据列表
    init() {
      this.materpagr.page = 1;
      this.materiallocalf(1);
    },
    //一进来先获取第一页素材获取素材
    materiallocalf(page) {
    if (this.materpagr.page == 1 || page) {
      this.loading = true;
          //materiallocal是自己封装的接口，可根据自己的代码来改
      materiallocal({
        page: page,
        page_size: this.materpagr.page_size,
      }).then((response) => {
        this.videoList = response.data.data.list;
        this.materpagr.page = response.data.data.page;
        this.materpagr.page_size = response.data.data.pageSize;
        this.loading = false;
      });
       }else{
        //当不等于第一页时执行上拉加载函数
        this.videoMore()
       }
    },

    //加载更多函数
    videoMore(){
      // 通过数据总数判断页数
      if (
        this.materpagr.page - 1 >
        this.materpagr.cursor / this.materpagr.page_size
      ) {
        return false;
      } else {
        this.materpagr.page  ;
        this.loading = true;
        this.busy = true; //设置执行loadMore函数
        materiallocal({
         page: this.materpagr.page,
         page_size: this.materpagr.page_size,
        }).then((response) => {
          let newData = response.data.data.list;
          let oldData = this.videoList;
          this.videoList =  oldData.concat(newData); //此处注意是叠加进数组而不是替换
          this.materpagr.cursor = response.data.data.count;
          this.materpagr.page = response.data.data.page;
          this.materpagr.page_size = response.data.data.pageSize;
          this.loading = false;
          this.busy = false; //数据请求成功后设置停止执行loadMore函数
        });
      }
    },
  
  },

以下就完成了v-infinite-scroll的使用过程

这篇好文章是转载于：学新通技术网