custom-pull.uvue

<template>
  <view class="pull-box-root" :style="{'height':height+'px'}">

    <view class="pull-box" @touchmove="touchmove" @touchstart="touchstart" @touchend="touchend"
      :style="{'height':height+loadingBoxHeight+refreshBoxHeight+'px',width,'transform':'translateY('+(y-refreshBoxHeight-3)+'px)'}">


      <view class="refresh-box" :style="{height:refreshBoxHeight+'px'}">
        <slot name="refresh-box" :refreshState="refreshState" :pullingDistance="y"></slot>
      </view>
      <!--          <view v-if="refreshState == 0">继续下拉执行刷新</view>
        <view v-if="refreshState == 1">释放立即刷新</view>
        <view v-if="refreshState == 2">刷新中...</view>
        <view v-if="refreshState == 3">刷新完成</view>
        <view style="position: absolute;top: 60px;">拖动的距离：{{y}}</view> -->

      <scroll-view :scroll-y="true && !lockScrollY" :style="{'height':height+'px',width}" @scroll="onScroll">
        <slot></slot>
      </scroll-view>
      <!-- <view v-if="loadingState == 0">继续上拉加载更多</view>
          <view v-if="loadingState == 1">释放立即加载更多</view>
          <view v-if="loadingState == 2">加载中...</view>
          <view v-if="loadingState == 3">加载完成</view>
          <view style="position: absolute;top: 60px;">拖动的距离：{{y}}</view>-->
      <view class="loading-box" :style="{height:loadingBoxHeight+'px'}">
        <slot name="loading-box" :loadingState="loadingState" :pullingDistance="y"></slot>
      </view>
    </view>

    <!-- <view style="position: fixed;bottom: 100px;left: 100px;background-color: red;">
      <text>scrollInBottom: {{scrollInBottom}}</text>
      <text>height：{{height}}</text>
      <text>loadingBoxHeight：{{loadingBoxHeight}}</text>
      <text>{{height+refreshBoxHeight}}</text>
    </view> -->

  </view>
</template>

<script>
  import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent';
  let sY : number = 0;
  let scrollTop : number = 0;
  export default {
    data() {
      return {
        x: 0 as number,
        y: 0 as number,
        lockScrollY: false as boolean,
        scrollInBottom: false as boolean,
        refreshState: 0 as number,
        loadingState: 0 as number
      }
    },
    computed: {
    },
    props: {
      height: {
        type: Number,
        default: 300
      },
      width: {
        type: String,
        default: '750rpx'
      },
      refreshBoxHeight: {
        type: Number,
        default: 50
      },
      refreshThreshold: {
        type: Number,
        default: 30
      },
      loadingBoxHeight: {
        type: Number,
        default: 50
      },
      loadingThreshold: {
        type: Number,
        default: 20
      },
      refreshHoldHeight: {
        type: Number,
        default: 20
      },
      loadingHoldHeight: {
        type: Number,
        default: 20
      },
    },
    methods: {
      touchstart(e : TouchEvent) {
        sY = e.touches[0].screenY
      },
      touchmove(e : TouchEvent) {
        if (
          // 滚动条不在顶部，也不是触底
          scrollTop != 0 && !this.scrollInBottom ||
          // 正在刷新中，或者加载更多中
          this.refreshState != 0 && this.loadingState != 0
        ) {
          return
        }

        let touchmoveY : number = e.touches[0].screenY
        // console.log('touchmoveY', touchmoveY);

        this.lockScrollY = true
        let mY = touchmoveY - sY
        
        if (
          this.y < this.refreshBoxHeight && mY > 0
        ) {
          this.y = mY > this.refreshBoxHeight ? this.refreshBoxHeight : mY
          console.log('下拉',this.y,this.refreshThreshold,this.refreshBoxHeight);
          if (this.y >= this.refreshThreshold) {
            this.refreshState = 1
          }
        } else if(scrollTop != 0 && this.y > this.loadingBoxHeight * -1){
          this.y = mY <= this.loadingBoxHeight * -1 ? this.loadingBoxHeight * -1 : mY
          console.log("上拉");
          if (this.y < this.loadingThreshold * -1) {
            this.loadingState = 1
          }
        }
        else {
          return
        }

      },
      touchend() {
        this.lockScrollY = false
        if (this.refreshState == 1) {
          this.y = this.refreshHoldHeight //下拉刷新时保持的高度
          this.refreshState = 2
          this.$emit('refresh')

          // 因为不支持调用组件内的事件先在内部模拟
          setTimeout(this.endRefresh, 1000);

        } else if (this.loadingState == 1) {
          this.y = -1 * this.loadingHoldHeight //上拉加载时时保持的高度
          this.loadingState = 2
          this.$emit('loading')

          // 因为不支持调用组件内的事件先在内部模拟
          setTimeout(this.endLoading, 1000);
        } else {
          this.y = 0
        }
      },
      onScroll(e : ScrollEvent) {
        console.log('ScrollViewScroll-currentTarget', e.currentTarget);
        scrollTop = e.detail.scrollTop
        this.scrollInBottom = (scrollTop + this.height) == e.detail.scrollHeight
      },
      endRefresh() {
        this.refreshState = 3
        setTimeout(() => {
          this.refreshState = 0
          this.y = 0
        }, 1000);
      },
      endLoading() {
        this.loadingState = 3
        setTimeout(() => {
          this.loadingState = 0
          this.y = 0
        }, 1000);
      }
    }
  }
</script>

<style scoped>
  .pull-box-root {
  }

  .pull-box {}

  /* .loading-box {
    justify-content: flex-start;
    align-items: center;
  }

  .refresh-box {
    justify-content: flex-end;
    align-items: center;
  } */
</style>