uniapp实习 下拉刷新，上滑加载功能

最近使用uniapp写小程序时很多时候需要使用加载刷新，下面是一个dome。希望可以给你提供帮助。

<template>
  <!-- 页面容器 -->
  <view class="homepage">
    <view class="content" @touchstart="touchEvent($event,'start')" @touchmove="touchEvent($event,'move')"
          @touchend="touchEvent($event,'end')" :style="{height:`calc(100vh - ${propsHeight}rpx)`}">
      <scroll-view :scroll-y="pulldown.scrollStatus" :lower-threshold="bottomDistance" class="content-scroll"
                   @scrolltoupper="scrollEvent($event,'scrolltoupper')"
                   @scrolltolower="scrollEvent($event, 'scrolltolower')" @scroll="scrollEvent($event,'scroll')">
        <!-- 下拉刷新块 -->
        <view class="pull" :style="'height:' + Math.ceil(pulldown.distance*0.18) + 'px'">
          <view style="display: flex;align-items: center">
            <view v-show="pulldown.msg!=='刷新成功'" class="loading"></view>
            <text class="pull-msg">{{ pulldown.msg }}</text>
          </view>
        </view>
        <!-- 内容插槽 -->
        <slot name="diyContent"></slot>
        <uni-load-more v-if="loadMore" :status="loadMoreStatus"/>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    /* ***************** 页面容器 - 配置 ***************** */
    /* 页面容器 - 背景色 */
    contentBackground: {type: String, default: '#f8f8f8'},
    /* 下拉刷新 是否开启 */
    showRefresh: {type: Boolean, default: false},
    /*下拉刷新 刷新完成时间 */
    refreshTime: {type: Number, default: 0},
    /* 上滑加载是否开启 */
    showUpLower: {type: Boolean, default: false},
    /*刷新组件高度*/
    propsHeight: {type: Number, default: 0},
    /* 提示  <uni-load-more status="more"></uni-load-more> */
    loadMoreStatus: {type: String, default: 'more'},
    /* 距底部/右边多远时（单位px），触发 scrolltolower 事件*/
    bottomDistance: {type: Number, default: 0},
    /* 刷新状态，是否成功 */
    loadState: {type: String, default: false},
  },
  data() {
    return {
      pulldown: {
        // 是否开启滚动
        scrollStatus: true,
        // 是否置顶
        flag: 1,
        // 初始手指高度
        startY: 0,
        // 手指滑动距离
        distance: 0,
        // 下拉刷新文本
        msg: '下拉刷新',
      },
      loadMore: false
    };
  },
  computed: {
    /* 系统属性 */
    systemInfo() {
      const systemInfo = uni.getSystemInfoSync();
      return systemInfo;
    }
  },
  watch: {
    /* 下拉刷新结束 */
    refreshTime(val, old) {
      if (val != 0) {
        this.touchEvent({}, 'redo')
      }
    },
  },
  methods: {
    /* 手指事件 */
    touchEvent(e, ty) {
      if (!this.showRefresh) {
        return;
      }
      switch (ty) {
        case 'start':
          this.pulldown.startY = e.changedTouches[0].pageY
          break;
        case 'move':
          if (e.changedTouches[0].pageY > this.pulldown.startY && this.pulldown.flag == 1) {
            this.pulldown.scrollStatus = false
            if (e.changedTouches[0].pageY - this.pulldown.startY <= 300) {
              this.pulldown.distance = (e.changedTouches[0].pageY - this.pulldown.startY)
              if (e.changedTouches[0].pageY - this.pulldown.startY >= 200) {
                this.pulldown.msg = '松开刷新'
              } else {
                this.pulldown.msg = '下拉刷新'
              }
            }
          }
          break;
        case 'end':
          if (this.pulldown.flag === 0 || this.pulldown.msg === '下拉刷新') {
            this.touchEvent('none', 'redo');
            return;
          } else if (this.pulldown.msg == '松开刷新') {
            this.pulldown.distance = 200
            this.pulldown.msg = '正在刷新...'
            this.$emit('pullRefreshData')
            this.pulldown.msg = this.loadState ? '刷新成功' : '正在刷新...'
            setTimeout(() => {
              this.pulldown.distance = this.loadState ? 0 : 200
            }, 1000)
          }
          break;
        case 'redo':
          this.pulldown.scrollStatus = true
          var interval = setInterval(() => {
            if (this.pulldown.distance > 0) {
              if (this.pulldown.distance - 10 < 0) {
                this.pulldown.distance = 0
              } else {
                this.pulldown.distance -= 10
              }
            } else {
              clearInterval(interval);
            }
          }, 5)
          break;
      }
    },
    /* 滚动事件 */
    scrollEvent(e, ty) {
      this.loadMore = true
      switch (ty) {
        case 'scrolltoupper':
          this.pulldown.flag = 1
          // 透明渐变状态+导航
          if (this.showOpacityBar) {
            this.opacityValue = 0
          }
          break;
        case 'scrolltolower':
          this.$emit('loadingMore');
          break;
        case 'scroll':
          if (e.detail.scrollTop > 0) {
            this.pulldown.flag = 0
          }
          break;
        default:
          break;
      }
    },
  },
}
</script>

<style>
scroll-view ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background-color: transparent;
}
</style>
<style lang="scss" scoped>
@import '../login/font-family';

.homepage {
  position: relative;

  .content {
    width: 100%;
    .content-scroll {
      width: 100%;
      height: 100%;

      .pull {
        width: 100%;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        .pull-msg {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          overflow: hidden;
          color: #666666;
        }
      }

      .up {
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;

        .up-msg {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          overflow: hidden;
          color: #666666;
        }
      }

      .safearea {
        width: 100%;
      }
    }
  }
}

.loading {
  margin-right: 5rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  border: 2rpx solid transparent;
  border-top: 2rpx solid #000;
  border-left: 2rpx solid #000;
  animation: rotate 1s infinite linear;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
</style>

直接新建组件引入即可使用。

<view-content @pullRefreshData="flushedData" @loadingMore="loadingMoreData" ref="scrollView"
                    :loadMoreStatus="userStatus" :bottom-distance="3" :load-state="loading"
                    :showRefresh="true" :propsHeight="770" :showUpLower="true">
        <view slot="diyContent" class="listBox">
          
        </view>
      </view-content>