<template>
    <div class="ht-base-scroll-demo">
        <ht-base-scroll :on-reach-edge="handleReachEdge">
            <p v-for="item in list" :key="item">{{ '' + item + item + item }} Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, animi error esse libero nam perspiciatis quo quod totam vitae. Adipisci beatae, esse expedita in maxime sed soluta temporibus. Amet, at?</p>
        </ht-base-scroll>
    </div>
</template>

<script>
  export default {
    name: 'HtBaseScrollDemo',
    data() {
      return {
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
      }
    },
    methods: {
      handleReachEdge (dir) {
        console.log(dir);
        return new Promise(resolve => {
          setTimeout(() => {
            if (dir > 0) {
              const first = this.list[0];
              for (let i = 1; i < 11; i++) {
                this.list.unshift(first - i);
              }
            } else {
              const last = this.list[this.list.length - 1];
              for (let i = 1; i < 11; i++) {
                this.list.push(last + i);
              }
            }
            resolve();
          }, 1000);
        });
      }
    }
  }
</script>
<style>
    .ht-base-scroll-demo {

    }
</style>

