vue滚动加载更多组件，适用于pc端和移动端，功能单一简单

vue滚动加载更多组件，适用于pc端和移动端，功能单一简单,只处理了滚动加载问题，其余loading等效果可自己在slot里面灵活配置

<template>
  <div class="scroll-more">
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    //获取滚动条当前的位置
    getScrollTop() {
      var scrollTop = 0;
      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
      } else if (document.body) {
        scrollTop = document.body.scrollTop;
      }
      return scrollTop;
    },
    //获取当前可视范围的高度
    getClientHeight() {
      var clientHeight = 0;
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = Math.min(
          document.body.clientHeight,
          document.documentElement.clientHeight
        );
      } else {
        clientHeight = Math.max(
          document.body.clientHeight,
          document.documentElement.clientHeight
        );
      }
      return clientHeight;
    },

    //获取文档完整的高度
    getScrollHeight() {
      return Math.max(
        document.body.scrollHeight,
        document.documentElement.scrollHeight
      );
    }
  },
  created() {},
  mounted() {
    //滚动事件触发
    var self = this;
    window.onscroll = function() {
      
      if (self.getScrollTop() + self.getClientHeight() >= (self.getScrollHeight())) {
        console.log("到底部了")
        self.$emit('scroll-state',true)
      }
    };
  },
  destroyed() {
    // window.onscroll = null;
  }
};
</script>

<style>

</style>

使用

<scroll-more @scroll-state="scroll">
# 这里写内容和loading效果
</scroll-more>

...
methods:{
scroll(){
console.log('触发了')
}
}