custom-pull-page.uvue

<template>
  <view class="root">
    <view class="top-box">
      <text class="top-box-text">可通过slot自定义，上拉加载下来刷新效果示例</text>
      <text class="top-box-text">已知问题：因不支持通过ref 调用组件内的方法，本示例在下拉触发刷新方法时，1秒后“组件内”直接调用刷新完成接口，上拉加载同理。后续会修复</text>
    </view>

    <custom-pull :height="300" width="750rpx" :refreshBoxHeight="60" :refreshThreshold="60" :refreshHoldHeight="60"
      :loadingBoxHeight="30" :loadingThreshold="20" :loadingHoldHeight="30" @loading="loading" @refresh="refresh"
      ref="custom-pull" class="custom-pull">

      <template v-slot:refresh-box="scope">
        <view class="refresh-box">
          <image class="logo" src="/static/logo.png" mode="widthFix"></image>
          <text class="tip-text" v-if="scope.get('refreshState')== 0">继续下拉执行刷新（slot）</text>
          <text class="tip-text" v-if="scope.get('refreshState')== 1">释放立即刷新</text>
          <text class="tip-text" v-if="scope.get('refreshState')== 2">刷新中</text>
          <text class="tip-text" v-if="scope.get('refreshState')== 3">刷新完成</text>
          <!-- 可基于拖动距离实现互动性更加强的效果 -->
          <!-- <text class="tip-text">拖动的距离：{{scope.get('pullingDistance')}}</text> -->
        </view>
      </template>


      <view v-for="i in 8" class="item">
        item-{{i}}
      </view>

      <template v-slot:loading-box="scope">
        <view class="loading-box">
          <text class="tip-text" v-if="scope.get('loadingState')== 0">继续上拉加载更多（slot）</text>
          <text class="tip-text" v-if="scope.get('loadingState')== 1">释放立即加载更多</text>
          <text class="tip-text" v-if="scope.get('loadingState')== 2">加载中...</text>
          <text class="tip-text" v-if="scope.get('loadingState')== 3">加载完成</text>
          <!-- 可基于拖动距离实现互动性更加强的效果 -->
          <!-- <text>拖动的距离：{{scope.get('pullingDistance')}}</text> -->
        </view>
      </template>

    </custom-pull>

  </view>
</template>

<script>
  import customPull from './custom-pull/custom-pull.uvue';

  export default {
    components: {
      customPull
    },
    data() {
      return {
      }
    },
    onLoad() {
      console.log('this.$refs["custom-pull"]', this.$refs["custom-pull"]);
    },
    methods: {
      loading() {
        setTimeout(() => {
          // this.$refs["custom-pull"].endLoading() //暂不支持，内部模拟实现
        }, 1000);
      },
      refresh() {
        setTimeout(() => {
          // this.$refs["custom-pull"].endRefresh() //暂不支持，内部模拟实现
        }, 1000);
      }
    }
  }
</script>

<style scoped>
  .root {
    flex: 1;
    background-color: #FFF;
  }
  .top-box{
    padding: 15px 5px;
  }
  .top-box-text{
    font-size: 14px;
    color: #888;
  }

  .custom-pull {
    border: 1px solid #efefef;
  }

  .refresh-box,
  .loading-box {
    background-color: #efefef;
    justify-content: center;
    align-items: center;
  }

  .logo {
    width: 30px;
    height: 30px;
    margin-top: 3px;
  }

  .item {
    height: 80px;
    border-top: 1px solid #efefef;
    justify-content: center;
  }

  .tip-text {
    color: #888;
    font-size: 12px;
    padding: 2px 0;
  }
</style>