写一个自己的vue触底加载更多组件

<template>
  <div class="infinite" ref="container" :style="{height: height}">
    <div class="inner" ref="inner">
      <!-- 列表标题 -->
      <slot name="title"></slot>
      <!-- 这里放列表 -->
      <slot></slot>
      <!-- 加载中的动画 -->
      <slot name="loading" v-if="loading"></slot>
      <!-- 加载完成的动画 -->
      <slot name="nomore" v-if="nomore"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'infinite-scroll',
  props: {
    height: {
      type: String,
      default: '800px'
    },
    loading: {
      type: Boolean,
      default: false
    },
    nomore: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      containerHeight: 0,
      innerHeight: 0
    }
  },

  mounted () {
    this.containerHeight = this.$refs.container.clientHeight //容器盒子
    this.innerHeight = this.$refs.inner.offsetHeight //内容盒子
	console.log('this.containerHeight',this.containerHeight);
	console.log('this.innerHeight',this.innerHeight);
    this.$refs.container.addEventListener('scroll', this.initScroll)
  },
  methods: {
    initScroll (e) {
      if (this.loading || this.nomore) return
      this.innerHeight = this.$refs.inner.offsetHeight
      let scrollTop = e.target.scrollTop //滚动条的高度
	  console.log(scrollTop);
      if (scrollTop + this.containerHeight >= this.innerHeight) {
        console.log('-----------------触底了-------------');
        this.$emit('loadBottom')
      }
    }
  }
}
</script>
<style scoped>
  .infinite {
    width: 100%;
	min-height: 100%;
    background-color: skyblue;
    overflow: auto;
    -webkit-overflow-scrolling: touch; // 解决iOS滚动问题
  }
</style>

个人理解：确定包裹容器的高度，超出滚动处理，然后监听scrollTop +容器的高度 与 子盒子高度对比；

原文地址：https://www.cnblogs.com/blackbentel/p/11065611.html