组件源码 .vue文件
<!-- vue 分页加载数据滚动加载更多 -->

<template>

  <div

    style="height:100%;overflow:auto"

    ref="filesTable"

  >

    <div

      ref="tableInner"

      class="tableInner"

    >

    <slot></slot>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {};

  },

  mounted() {

    // 滚动加载更多

    const _this = this;

    const _filesTable = this.$refs.filesTable;

    const _offsetHeight = _filesTable.offsetHeight;

    _filesTable.addEventListener("scroll", () => {

      const _scrollTop = _filesTable.scrollTop;

      const _bodyHeight = _this.$refs.tableInner.clientHeight;

      if (_scrollTop + _offsetHeight >= _bodyHeight) {

        _this.$emit("dataScroll")

      }

    });

  },

  methods: {},

  components: {}

};

</script>

引用方式:

<tssi-scroll @dataScroll="dataScroll">

<slot>内容</slot>

</tssi-scroll>

Events

@dataScroll            

type: function

当页面滚动触底后触发事件

ps :

需要保证内容部分超出页面高度,即有可滚动的条件,可以触发滚动