<template>
  <div class="h100 w100">
    <zgh-header :title="$route.name"></zgh-header>
    <div class="common-top h100 over-scroll" v-load-more.scroll="update">
      <div>
        <p class="pd5"></p>
        <List4 v-for="i in length" v-bind:key="i"></List4>
        <p class="textC color6 fs14 pd10">{{msg}}</p>
      </div>

    </div>
  </div>
</template>

<script>

  import List4 from '../list/children/list4';

  export default {
    components: {
      List4
    },
    data() {
      return {
        length: 1,
        msg: '加载中····'
      }
    },
    computed: {},
    mounted() {

    },
    methods: {
      update(state) {
        if (state !== 'update') {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              this.length++;
              if (this.length > 4) {
                this.msg = '全部加载完成!';
                return;
              }
              resolve()
            }, 1000)
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import url("../../assets/config.less");

  a {

    display: block;
    text-align: center;
    .lh(70);
  }
</style>
