uni-app 如何修改下拉刷新和上拉加载的loading，使用自己的logo

ionicwang 1楼•8 天前

在 uni-app 中，你可以通过自定义下拉刷新和上拉加载的加载图标（loading）来实现使用自己的 logo。下面是如何实现的代码示例。

修改下拉刷新图标

要实现自定义下拉刷新图标，你需要在页面的 onPullDownRefresh 事件中动态修改页面的加载图标。通常，你需要借助 CSS 和一些自定义组件来完成。

定义自定义下拉刷新组件：

<template>
  <view class="refresh-container">
    <image v-if="isRefreshing" class="refresh-icon" src="/static/your_logo.png" alt="custom logo"></image>
    <!-- 其他下拉刷新内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      isRefreshing: false
    };
  },
  methods: {
    startRefresh() {
      this.isRefreshing = true;
      // 模拟数据加载
      setTimeout(() => {
        this.isRefreshing = false;
        uni.stopPullDownRefresh();
      }, 2000);
    }
  },
  onPullDownRefresh() {
    this.startRefresh();
  }
};
</script>

<style>
.refresh-container {
  /* 样式定义 */
}
.refresh-icon {
  width: 30px;
  height: 30px;
}
</style>

在页面中引入并使用该组件：

<template>
  <view>
    <CustomRefresh />
    <!-- 页面其他内容 -->
  </view>
</template>

<script>
import CustomRefresh from '@/components/CustomRefresh.vue';

export default {
  components: {
    CustomRefresh
  }
};
</script>

修改上拉加载图标

要实现自定义上拉加载图标，你可以使用 onReachBottom 事件，结合自定义的加载动画或图标。

定义自定义上拉加载组件：

<template>
  <view class="load-more-container" v-if="isLoading">
    <image class="load-more-icon" src="/static/your_logo.png" alt="custom logo"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    };
  },
  methods: {
    loadMore() {
      this.isLoading = true;
      // 模拟数据加载
      setTimeout(() => {
        this.isLoading = false;
      }, 2000);
    }
  },
  onReachBottom() {
    this.loadMore();
  }
};
</script>

<style>
.load-more-container {
  /* 样式定义 */
}
.load-more-icon {
  width: 30px;
  height: 30px;
}
</style>

在页面中引入并使用该组件（类似下拉刷新部分）。

通过这种方法，你可以完全自定义 uni-app 中的下拉刷新和上拉加载的图标，使其符合你的品牌或应用风格。注意，uni-app 的版本更新可能会带来一些变化，所以最好查阅最新的官方文档以确保兼容性。