Vue

Vue 上拉加载更多

2021-07-31  本文已影响0人  逗婆苍穹
// 要滚动的元素 @scroll="scroll"
// noMore 表示有没有更多  loading 表示是否正在加载,scrollHeight - 20 表示距离底部多少px触发
scroll(e) {
  let clientHeight = e.target.clientHeight;
  let scrollTop = e.target.scrollTop;
  let scrollHeight = e.target.scrollHeight;

  if (clientHeight + scrollTop >= scrollHeight - 20) {
    // 如果 loading == true 说明正在加载 不允许请求数据
    if (!this.loading) {
       this.getUserList()
     }
   }
}


 async getUserList() {
      this.loading = true;
      let filter = {};
      let op = {};
      for (let key in this.filter ) {
        filter[key] = this.filter [key].value;
      }
      let res = await this.$api.drsc_getData({
        page: this.currentPage,
        limit: this.limit,
        filter,
      });
      this.userList.push(...res.data);
      if (res.data.length) {
        this.currentPage++;
      } else {
        this.noMore = true;
      }
      this.loading = false;
    }
上一篇 下一篇

猜你喜欢

热点阅读