vue滚动到底，请求后端数据分页加载更多

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

  <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 // 用一个变量来记录没有更多数据了
        }
      } 
    },