<template>
  <sv-loadmore :top-method="refresh">
    <sv-list>
      <sv-item v-for="item in items" :key="item">{{item}}</sv-item>
    </sv-list>
  </sv-loadmore>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        items: [],
        currentPage: 1,
        pageSize: 20
      }
    },
    watch: {
      currentPage (val) {
        this.findData(val)
      }
    },
    methods: {
      loadmore () {
        this.currentPage += 1
      },
      refresh () {
        this.currentPage = 1
      },
      findData (currentPage = 1) {
        this.items = []
        for (let i = 0; i < currentPage * this.pageSize; i++) {
          this.items.push(`item${i + 1}`)
        }
      }
    },
    created () {
      this.findData(1)
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../../src/styles/base";
  @import "../../styles/components";
</style>
