<template>
  <Container>
    <template v-slot:header>
      <WlHeader :needBottomBorder="true">WlLoadMore 滚动加载</WlHeader>
    </template>
    <template v-slot:main>
      <div class="wrap">
        <WlLoadMore @load="load" :finished="finished" v-model="isLoading">
          <div v-for="(item, index) in list" :key="index" class="item">
            <p>item-{{ index }}---{{ item }}</p>
          </div>
        </WlLoadMore>
      </div>
    </template>
  </Container>
</template>

<script>
import Container from "../components/Container";
export default {
  name: "WlLoadMore-Example",
  components: { Container },
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
      finished: false,
      isLoading: false,
    };
  },
  methods: {
    load() {
      const timer = setTimeout(() => {
        const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].map((ele, index) => ele + index);
        this.list = this.list.concat(arr);
        this.isLoading = false;
        if (this.list.length > 100) {
          this.finished = true;
          clearTimeout(timer);
        }
      }, 2000);
    },
  },
};
</script>

<style scoped lang="scss">
.wrap {
  height: 100%;
  @extend %overflow-auto;

  .item {
    padding: j(20);
    background: white;
    @include halfBorder("bottom", #eeeeee);
  }
}
</style>
