<template>
  <div>
    <div class="bx-list">
      <div class="bx-list-item">
        列表1
      </div>
      <div class="bx-list-item">
        列表2
      </div>
      <div class="bx-list-item">
        列表3
      </div>
      <div class="bx-list-item">
        列表4
      </div>
      <div class="bx-list-item">
        列表5
      </div>
      <div class="bx-list-item">
        列表6
      </div>
      <div class="bx-list-item">
        列表7
      </div>
      <div class="bx-list-item">
        列表8
      </div>
      <div class="bx-list-item">
        列表9
      </div>
      <div class="bx-list-item">
        列表10
      </div>
      <div class="bx-list-item">
        列表11
      </div>
      <div class="bx-list-item">
        列表12
      </div>
      <div class="bx-list-item">
        列表13
      </div>
      <div class="bx-list-item">
        列表14
      </div>
      <div class="bx-list-item">
        列表15
      </div>
    </div>
    <bxs-load-more
      :has-more="hasMore"
      :is-loading="isLoading"
      :is-error="isError"
      />
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      hasMore: true,
      isLoading: false,
      isError: false,
    }
  },
  methods: {
    getList() {
      this.isLoading = true
      this.isError = false
      window.setTimeout(() => {
        this.hasMore = true
        this.isLoading = false
      }, 1500)
    },
    scrollListener(callback) {
      window.onscroll = function onscroll() {
        const element = document.documentElement
        const scrollTop =
          document.documentElement.scrollTop ||
          window.pageYOffset ||
          document.body.scrollTop
        if (element.scrollHeight === element.clientHeight + scrollTop) {
          callback()
        }
      }
    },
    loadMore() {
      if (!this.isLoading) {
        if (!this.isError) {
          this.page += 1
        }
        this.getList()
      }
    },
  },
  mounted() {
    this.scrollListener(() => {
      if (this.hasMore) {
        this.loadMore()
      }
    })
  },
}
</script>

<style lang="css">
body {
  background-color: #f2f2f2;
}
</style>
