<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1;">
  <!-- #endif -->
    <!-- 实际开发中，长列表应该使用list-view -->
    <view class="uni-padding-wrap uni-common-mt">
      <text class="text" v-for="(num,index) in data" :key="index">list - {{num}}</text>
      <view v-if="showLoadMore">{{loadMoreText}}</view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script lang="uts">
  export default {
    data() {
      return {
        data: [] as Array<number>,
        loadMoreText: "加载中...",
        showLoadMore: false,
        max: 0,
        pulldownRefreshTriggered: false
      }
    },
    onReady() {
      uni.startPullDownRefresh();
      this.initData();
    },
    onReachBottom() {
      console.log("onReachBottom");
      if (this.max > 40) {
        this.loadMoreText = "没有更多数据了!"
        return;
      }
      this.showLoadMore = true;
      setTimeout(() => {
        this.setListData();
      }, 300);
    },
    onPullDownRefresh() {
      console.log('onPullDownRefresh');
      this.pulldownRefreshTriggered = true
      this.initData();
    },
    methods: {
      initData() {
        setTimeout(() => {
          this.max = 0;
          this.data = [];
          let data : Array<number> = [];
          this.max += 20;
          for (let i : number = this.max - 19; i < this.max + 1; i++) {
            data.push(i)
          }
          this.data = this.data.concat(data);
          uni.stopPullDownRefresh();
        }, 1000);
      },
      setListData() {
        let data : Array<number> = [];
        this.max += 10;
        for (let i : number = this.max - 9; i < this.max + 1; i++) {
          data.push(i)
        }
        this.data = this.data.concat(data);
      }
    }
  }
</script>

<style>
  .text {
    margin: 6px 0;
    width: 100%;
    background-color: #fff;
    height: 52px;
    line-height: 52px;
    text-align: center;
    color: #555;
    border-radius: 4px;
  }
</style>