美文网首页Vue
Vue 上拉加载更多

Vue 上拉加载更多

作者: 逗婆苍穹 | 来源:发表于2021-07-31 14:10 被阅读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;
        }
    

    相关文章

      网友评论

        本文标题:Vue 上拉加载更多

        本文链接:https://www.haomeiwen.com/subject/dxtkvltx.html