<template>
  <div class="list-wrap">
    <div ref="scrollContent" class="content" @scroll="onScroll">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    toTop: {
      type: Number,
      default: 0
    },
    beforeBottomHeight: {
      type: Number,
      default: 50
    }
  },
  data() {
    return {
      activated: false
    };
  },
  watch: {
    toTop: {
      handler(val) {
        this.$nextTick(() => {
          if (this.activated) this.$refs.scrollContent.scrollTop = val;
        });
      }
    }
  },
  activated() {
    this.activated = true;
  },
  methods: {
    onScroll() {
      const obj = this.$refs.scrollContent; // clientHeight 视口高度 scrollTop 滚动条离顶部的高度 scrollHeight 列表内容的高度
      if (obj.clientHeight + (obj.scrollTop + this.beforeBottomHeight) >= obj.scrollHeight) {
        this.$emit('toBottom');
      }
      this.activated = false;
      this.$emit('scroll', obj.scrollTop);
    }
  }
};
</script>
<style lang="less" scoped>
.list-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.list-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.content {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.loading {
  position: absolute;
  bottom: -20px;
  width: 100%;
  height: 20px;
  text-align: center;
  .text-size(12);
  color: @black;
}
::-webkit-scrollbar {
  // 去除滚动条边框
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
</style>
