custom-refresher.uvue

<template>
  <scroll-view class="scroll-view"
      :refresher-enabled="true" :refresher-triggered="refresherTriggered" refresher-default-style="none"
      @refresherpulling="onRefresherpulling"
      @refresherrefresh="onRefresherrefresh"
      @refresherrestore="onRefreshrestore"
      :refresher-threshold="refresherThreshold"
      refresher-max-drag-distance="200px"
  >
    <view v-for="i in 20" class="content-item">
      <text class="text">item-{{i}}</text>
    </view>
    <refresh-box slot="refresher" :state="state" :pullingDistance="pullingDistance"></refresh-box>
  </scroll-view>
</template>

<script>
  import refreshBox from './refresh-box/refresh-box.uvue';
  export default {
    components:{refreshBox},
    data() {
      return {
        refresherTriggered:false,
        refresherThreshold:40,
        pullingDistance:0,
        resetting: false
      }
    },
    computed:{
      state():number{
        if (this.resetting) {
          return 3;
        }
        if(this.refresherTriggered){
          return 2
        }
        if(this.pullingDistance > this.refresherThreshold){
          return 1
        }else{
          return 0
        }
      }
    },
    methods: {
      onRefresherpulling(e:RefresherEvent){
        // console.log('onRefresherpulling',e.detail.dy)
        this.pullingDistance = e.detail.dy
      },
      onRefresherrefresh(){
        this.refresherTriggered = true
        setTimeout(()=>{
          this.refresherTriggered = false
          this.resetting = true
        },1500)
      },
      onRefreshrestore() {
        this.pullingDistance = 0
      	this.resetting = false;
      }
    }
  }
</script>

<style>
.scroll-view {
  flex: 1;
  padding: 5px 15px;
  background-color: #f5f5f5;
}

.content-item {
  padding: 15px;
  margin: 5px 0;
  background-color: #fff;
  border-radius: 5px;
}

.text {
  font-size: 14px;
  color: #666;
  line-height: 20px;
}

</style>