web端实现列表滚动加载更多数据

项目要求实现列表滚动加载多数据，element的InfiniteScroll 无限滚动不是很好用，于是就自己写了一个，首先要设置滚动的区域高度height: calc(100% - 45px)和overflow: auto;

具体高度可根据需要自己设置

具体实现方法如下

<template>
<div class="nav-list-main">
      <div
        class="nav-li"
        :class="{ active: index === curIndex }"
        v-for="(item, index) in navList"
        :key="item.appid"
        @click="changeApp(item, index)"
      >
        <el-image class="avatar-img" :src="previewImage(item.appIcon)"></el-image>
        <div class="app-info">
          <div class="app-name">{{ item.appName }}</div>
          <div class="device">{{ item.platform }}</div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            params: {
                appName: '',
                page: 0,
                pageSize: 10,
                total: 0
            },
            tableData: [],
            isReachBottom: false,
            reachBottomDistance: 100,
            scrollHeight: 0,
            offsetHeight: 0
        }
    },
    created() {
        this.getData();
    },
    mounted() {
    
        let dom = document.querySelector('.content-nav .nav-list-main');
        this.scrollHeight = dom.scrollHeight;
        this.offsetHeight = Math.ceil(dom.getBoundingClientRect().height);

        window.addEventListener('scroll', this.onScroll, true);
    },
    destroyed() {
        window.removeEventListener('scroll', this.onScroll);
    },
    methods: {
        onScroll(e) {
          let scrollTop = e.target.scrollTop;
          let currentHeight = scrollTop + this.offsetHeight + this.reachBottomDistance;

          if (currentHeight < this.scrollHeight && this.isReachBottom) {
            this.isReachBottom = false;
          }
          if (this.isReachBottom) {
            return;
          }
          if (currentHeight >= this.scrollHeight) {
            this.isReachBottom = true;
            console.log('触底');
            this.params.page += 1;

            this.getData();
          }
        },
        async getData() {
          const params = _.cloneDeep(this.params);
          const res = await this.$api.usageShopManage.getAppList(params);
          const { content, totalElements } = res;
          this.params.total = totalElements;
          if (content.length > 0) {
            if (this.params.page === 0) {
              this.tableData = content;
            } else {
              this.tableData = this.tableData.concat(content);
            }
          } else {
            console.log('没有数据了');
          }
        },
    }
}
</script>