<template>
  <div class="page">
    <div class="demoName">
      <a class="icon" @click="$router.push({path:'/'})"></a>
      <div class="comp-title">infiniteloading</div>
    </div>
    <h3>基本用法</h3>
    <div class="scroll">
      <Infiniteloading
        @loadmore="onInfinite"
        :is-show-mod="true"
        :has-more="isHasMore"
        :is-loading="isLoading"
        :threshold="200"
        :useWindow="false"
      >
        <div class="list" v-for="(item, index) of data" :key="item">测试数据{{ index + 1 }}</div>
      </Infiniteloading>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: new Array(30),
        page: 2,
        num: 30,
        isHasMore: true,
        isLoading: false,
        isErr: false,
        timer: null
      }
    },
    methods: {
      onInfinite() {
        this.isLoading = true
        this.timer = setTimeout(() => {
          if (this.page <= 4) {
            this.data = new Array(this.num * this.page)
            this.page = this.page + 1
          } else {
            this.isHasMore = false
          }
          this.isLoading = false
        }, 1000)
      }
    },
    destroyed() {
      clearTimeout(this.timer)
    }
  }
</script>

<style lang="less" scoped>
.list {
  width: 100%;
  height: 50px;
  margin: 10px auto;
  font-size: 12px;
  color: #333;
  line-height: 50px;
  text-align: center;
  background: #FFFFFF;
  border-radius: 2px;
}
.scroll {
  padding: 16px;
  height: calc(100vh - 200px);
  overflow: auto;
}
</style>