一个可滚动的内容区域,绑定滚动事件

  <div class="lines" @scroll="scrollBottom">
    ...
  </div>
  .lines {
    height: calc(50vh - 100px);
    overflow: auto;
    }
    /** 判断滚动到底部 */
    scrollBottom(e) {
      const { scrollTop, scrollHeight, clientHeight } = e.srcElement
      // 滚动距离顶部高度 + 可视区域高度 >= 滚动内容高度,说明滚动到底
      if (scrollTop + clientHeight >= scrollHeight) {
        if (this.noMore) return 
        this.pageIndex++
        this.getMoreData()
      }
    },
   /** 请求后端分页数据,滚动到底加载更多 */
    async getMoreData() {
      const { data: res } = await axios.post(`xxxx`, {
        pageSize: 4,
        pageIndex: this.pageIndex- 1,
      })
      if (res.code === 200) {
        // 数组有值说明还有数据
        if(res.data.length){
           this.pageIndex++
           this.data = [...this.data,...res.data] // 合并数据
        }
        else {
          this.noMore = true // 用一个变量来记录没有更多数据了
        }
      } 
    },
Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐