uni-app 自定义下拉刷新效果

在 Uni-app 中实现自定义下拉刷新效果，可以通过监听页面的滚动事件以及自定义动画来实现。以下是一个基本的代码示例，展示了如何创建自定义的下拉刷新效果。

1. 初始化项目

首先，确保你已经创建了一个 Uni-app 项目。如果还没有，可以使用 HBuilderX 快速创建一个新的 Uni-app 项目。

2. 修改 App.vue 或页面文件

在 App.vue 或具体的页面文件中，添加以下代码：

<template>
  <view class="container">
    <scroll-view scroll-y="true" @scrolltolower="onScrollToLower" @scroll="onScroll" :scroll-top="scrollTop">
      <view class="refresh-indicator" v-if="isRefreshing" @click.stop>
        <text>加载中...</text>
      </view>
      <view class="content">
        <!-- 你的内容 -->
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      isRefreshing: false,
    };
  },
  methods: {
    onScrollToLower() {
      if (!this.isRefreshing) {
        this.isRefreshing = true;
        this.refreshData();
      }
    },
    onScroll(e) {
      this.scrollTop = e.detail.scrollTop;
      if (this.scrollTop <= 0 && this.isRefreshing) {
        // 取消刷新状态，当用户手动滚动到顶部时
        this.isRefreshing = false;
      }
    },
    refreshData() {
      // 模拟数据刷新
      setTimeout(() => {
        // 刷新数据逻辑
        console.log('数据刷新完成');
        this.isRefreshing = false;
        // 可选：重置滚动位置
        this.$refs.scrollView.scrollTop = 0;
      }, 2000);
    },
  },
};
</script>

<style>
.container {
  height: 100vh;
  overflow: hidden;
}
.refresh-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
.content {
  padding-top: 50px; /* 确保内容不被下拉刷新指示器覆盖 */
}
</style>

3. 解释

• scroll-view：用于创建可滚动的视图区域。
• @scrolltolower：当用户滚动到底部时触发。
• @scroll：滚动事件，用于实时获取滚动位置。
• scrollTop：控制滚动视图的位置。
• isRefreshing：标记是否正在刷新。
• refreshData：模拟数据刷新，并在刷新完成后重置状态。

以上代码提供了一个基本的自定义下拉刷新效果的实现。你可以根据需求进一步调整样式和逻辑，例如添加动画效果、更复杂的刷新逻辑等。