vue 触底加载

需求 数据太多需要做分页，不用表格的形式，使用滚动加载方式

<template>
      <ul class="list" @scroll="load" v-show="status">
        <li
          v-for="(item, index) in list"
          :key="index"
          class="infinite-list-item"
          @click="abb(item)"
        >
          {{ item.id }}
        </li>
      </ul>
    </template>

data() {
    return {
      list: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }],
    }
  },
  load(e) {
      let conScrollHeight = e.target.scrollHeight // 可以滚动区域的高度
      let conClientHeight = e.target.clientHeight // 区域内容的高度
      let conScrollTop = e.target.scrollTop //  内容滚动了的高度
      // 内容滚动了的高度 +  区域内容的高度 >= 可以滚动区域的高度
      // 则证明滑动到了页面底部，这个时候就去处理加载更多的逻辑)
      if (conScrollTop + conClientHeight >= conScrollHeight) {
        this.list.push({ id: this.list.length + 1 })
        console.log('加载中------------')
      }
    },