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('加载中------------')
      }
    },