vue實(shí)現(xiàn)下拉加載其實(shí)沒那么復(fù)雜

<template>
 <div class="list-wrap">
  <div class="content" ref="list" @scroll="onScroll">
   <slot></slot>
  </div>
  <div class="loading" v-show="loading">正在加載數(shù)據(jù)......</div>
 </div>
</template>
<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component({
 components: {}
})
export default class extends Vue {
 @Prop()
 private loading!: boolean;
 private onScroll() {
  const obj: any = this.$refs.list;
  // clientHeight 視口高度 scrollTop 滾動(dòng)條離頂部的高度 scrollHeight 列表內(nèi)容的高度
  if (obj.clientHeight + obj.scrollTop === obj.scrollHeight) {
   this.$emit("toBottom");
  }
 }
}
</script>
<style scoped lang="scss">
.list-wrap {
 width: 100%;
 height: 100%;
 position: relative;
 .content {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
 }
 .loading {
  position: absolute;
  bottom: -20px;
  width: 100%;
  height: 20px;
  color: #ffffff;
 }
}
::-webkit-scrollbar { // 去除滾動(dòng)條邊框
 width: 0 !important;
}
::-webkit-scrollbar {
 width: 0 !important;
 height: 0;
}
</style>

<div class="body">
   <m-list @toBottom="fetchNewData()" :loading="loading">
    <code-info class="item" v-for="(item,index) in dataList" :key="index"></code-info>
   </m-list>
</div>

 private dataList: any[] = [1, 2, 3, 4, 5, 6, 7, 8];
 private loading: boolean = false;
 private fetchNewData() {
  this.loading = true;
  setTimeout(() => {
   this.dataList.push(1, 2, 3);
   const ref: any = this.$refs.vueLoad;
   this.loading = false;
  }, 1000);
 }