<template>
  <view style="flex: 1;">
    <list-view style="flex: 1;" refresher-enabled="true" @refresherrefresh="onRefresh"
      :refresher-triggered="refresherTriggered" refresher-default-style="none">
      <list-item class="item" v-for="item in 1000">
        {{item}}
      </list-item>
      <list-item class="refresher" slot="refresher">
        <text class="refresher-text">自定义下拉刷新</text>
      </list-item>
    </list-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        refresherTriggered: false
      }
    },
    onLoad() {

    },
    methods: {
      onRefresh() {
        this.refresherTriggered = true
        setTimeout(() => {
          this.refresherTriggered = false
        }, 5000)
      }
    }
  }
</script>

<style>
  .item {
    height: 50px;
  }

  .refresher {
    height: 45px;
  }

  .refresher-text {
    line-height: 45px;
    text-align: center;
  }
</style>