<template>
  <scroll-view 
    class="scroll-view" 
    :scroll-y="scrollY"
    refresher-threshold="50"
    refresher-enabled
    :refresher-triggered="value"
    @scrolltolower="onLower"
    @refresherpulling="onPulling"
    @refresherrefresh="onRefresh"
    @refresherrestore="onRefreshed"
    @refresherabort="onRefreshed"
  >
    <slot></slot>
  </scroll-view>
</template>

<script>
export default {
  props: {
    value: Boolean,
    scrollY: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    onPulling(e) {
      if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
      this.$emit('input', true)
    },
    onRefresh() {
      this.$emit('refresh')
    },
    onRefreshed() {
      this.$emit('input', false)
    },
    onLower() {
      this.$emit('lower', false)
    }
  }
}
</script>

<style>
.scroll-view {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>