鸿蒙OS&UniApp 制作自定义的下拉刷新控件#三方框架 #Uniapp-CSDN博客

本文链接：https://blog.csdn.net/lbcyllqj/article/details/148240699

UniApp 制作自定义的下拉刷新控件

在移动应用开发中，下拉刷新（Pull-to-Refresh）是提升用户体验和数据交互效率的重要交互方式。无论是新闻资讯、社交动态还是商品列表，下拉刷新都能让用户以最自然的手势获取最新内容。随着 HarmonyOS（鸿蒙）生态的不断壮大，开发一套兼容鸿蒙的自定义下拉刷新控件变得尤为重要。本文将结合 UniApp 跨平台开发的优势，详细讲解如何实现一个高效、易扩展、适配鸿蒙的自定义下拉刷新控件，并分享实际案例和鸿蒙适配经验。

为什么要自定义下拉刷新控件？

虽然 UniApp 提供了 enablePullDownRefresh 和 onPullDownRefresh 等基础能力，但在实际项目中，往往会遇到如下需求：

支持自定义刷新动画、提示文字、主题色等；
支持下拉距离、回弹动画、加载状态等细节优化；
兼容多端，尤其是 HarmonyOS 设备的适配和体验优化；
支持与业务逻辑深度结合，如下拉触发广告、活动等。

自定义控件不仅能满足个性化需求，还能提升整体产品体验和品牌一致性。

组件设计思路

设计一个下拉刷新控件，需要考虑以下几个方面：

手势识别：监听 touch 事件，判断下拉距离和方向。
动画与反馈：自定义刷新动画、加载提示、回弹效果。
状态管理：下拉、松手、加载中、完成等多种状态切换。
鸿蒙适配：在鸿蒙端保证手势、动画、性能等能力正常。
易用性与扩展性：props 设计合理，便于业务集成和后续扩展。

组件实现

我们以一个通用的 PullToRefresh 组件为例，支持自定义动画、状态提示。

1. 组件结构

在 components/pull-to-refresh/pull-to-refresh.vue 下新建组件：

<template>
  <view class="ptr-wrapper" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
    <view class="ptr-header" :style="{ height: `${headerHeight}px`, transition: headerTransition }">
      <view v-if="status === 'pull'">↓ 下拉刷新</view>
      <view v-else-if="status === 'ready'">↑ 松开刷新</view>
      <view v-else-if="status === 'loading'">
        <text class="loading-icon">⏳</text> 正在刷新...
      </view>
      <view v-else-if="status === 'success'">✔ 刷新成功</view>
    </view>
    <view class="ptr-content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PullToRefresh',
  props: {
    refreshHeight: {
      type: Number,
      default: 80 // 触发刷新的下拉高度
    },
    maxHeight: {
      type: Number,
      default: 160 // 最大下拉高度
    },
    successDuration: {
      type: Number,
      default: 800 // 刷新成功后停留时间
    }
  },
  data() {
    return {
      startY: 0,
      moveY: 0,
      headerHeight: 0,
      status: 'pull', // pull, ready, loading, success
      headerTransition: ''
    };
  },
  methods: {
    onTouchStart(e) {
      if (this.status === 'loading') return;
      this.startY = e.touches[0].clientY;
      this.headerTransition = '';
    },
    onTouchMove(e) {
      if (this.status === 'loading') return;
      this.moveY = e.touches[0].clientY;
      let delta = this.moveY - this.startY;
      if (delta > 0) {
        delta = Math.min(delta, this.maxHeight);
        this.headerHeight = delta;
        this.status = delta > this.refreshHeight ? 'ready' : 'pull';
      }
    },
    onTouchEnd() {
      if (this.status === 'ready') {
        this.status = 'loading';
        this.headerHeight = this.refreshHeight;
        this.$emit('refresh', this.onRefreshDone);
      } else {
        this.reset();
      }
    },
    onRefreshDone() {
      this.status = 'success';
      setTimeout(() => {
        this.reset();
      }, this.successDuration);
    },
    reset() {
      this.headerTransition = 'height 0.3s cubic-bezier(0.4,0,0.2,1)';
      this.headerHeight = 0;
      this.status = 'pull';
    }
  }
};
</script>

<style scoped>
.ptr-wrapper {
  width: 100vw;
  min-height: 100vh;
  background: #f8f8f8;
  overflow: hidden;
}
.ptr-header {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #007dff;
  font-size: 30rpx;
  height: 0;
  background: #eaf6ff;
  transition: height 0.3s cubic-bezier(0.4,0,0.2,1);
}
.loading-icon {
  margin-right: 12rpx;
  font-size: 36rpx;
}
.ptr-content {
  min-height: 100vh;
  background: #fff;
}
</style>

2. 组件使用与页面集成

在页面中引用并使用 PullToRefresh 组件，实现下拉刷新功能：

<template>
  <pull-to-refresh @refresh="onRefresh">
    <view class="demo-list">
      <view v-for="item in list" :key="item" class="list-item">{{ item }}</view>
    </view>
  </pull-to-refresh>
</template>

<script>
import PullToRefresh from '@/components/pull-to-refresh/pull-to-refresh.vue';

export default {
  components: { PullToRefresh },
  data() {
    return {
      list: [1,2,3,4,5,6,7,8,9,10]
    };
  },
  methods: {
    onRefresh(done) {
      setTimeout(() => {
        // 模拟异步刷新
        this.list = this.list.map(i => i + 1);
        done();
      }, 1200);
    }
  }
};
</script>

<style scoped>
.demo-list {
  padding: 40rpx 0;
}
.list-item {
  background: #fff;
  margin-bottom: 16rpx;
  padding: 32rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  font-size: 32rpx;
  color: #333;
}
</style>