在 uniapp 框架中，修改页面刷新（比如下拉刷新、页面跳转加载等场景）时的 “loading” 图片，可分不同场景处理，以下是常见方式：
### 一、修改全局页面加载（如应用启动、页面跳转时的默认 loading ）
1. **通过`manifest.json`配置（针对 App 端）**
uniapp 中，App 启动、页面切换时的默认 loading 样式，可在`manifest.json`里设置。找到项目根目录的`manifest.json`文件（HBuilderX 中可直接可视化配置或编辑源码），在`app-plus`节点（App 特有配置）下添加或修改`loading`相关配置：
json
~~~json
{
"app-plus": {
"loading": {
"text": "加载中...", // 加载提示文字
"color": "#FFFFFF", // 文字颜色
"background": "#000000", // 背景颜色
"logo": "static/custom-loading.png", // 自定义 loading 图片路径，建议用本地静态资源，尺寸等需适配
"animation": "fade" // 动画效果，可选 fade（渐变）、zoom（缩放）等
}
}
}
~~~
保存后重新编译 App ，就能看到自定义的加载样式。注意：`logo`路径要正确，且图片格式、尺寸需适配不同设备，一般建议用简单的动画图或静态标识图。
2. **自定义全局加载组件（跨端通用思路）**
若想更灵活控制（比如不同页面 / 业务场景用不同 loading ），可自己封装全局 loading 组件：
* **步骤 1：创建 loading 组件**
在项目的`components`目录新建`custom-loading`组件（如`custom-loading.vue`），内容示例：
html
~~~html
<template>
<view class="custom-loading" v-show="show">
<image class="loading-img" :src="imgUrl"></image>
<text class="loading-text">{{text}}</text>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
text: "加载中",
imgUrl: "/static/custom-loader.png" // 自定义 loading 图片路径
};
},
methods: {
showLoading(newText = "加载中") {
this.text = newText;
this.show = true;
},
hideLoading() {
this.show = false;
}
}
};
</script>
<style scoped>
.custom-loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loading-img {
width: 60rpx;
height: 60rpx;
}
.loading-text {
margin-top: 20rpx;
color: #fff;
}
</style>
~~~
* **步骤 2：全局注册 / 引用组件**
在`App.vue`中引入并注册，通过全局事件（如`uni.$emit`/`uni.$on`）控制显示隐藏：
html
~~~html
<template>
<view class="app">
<custom-loading ref="customLoading"></custom-loading>
<router-view></router-view>
</view>
</template>
<script>
import customLoading from "@/components/custom-loading.vue";
export default {
components: {
customLoading
},
onLaunch() {
// 全局监听显示 loading 事件
uni.$on("showCustomLoading", (text) => {
this.$refs.customLoading.showLoading(text);
});
// 全局监听隐藏 loading 事件
uni.$on("hideCustomLoading", () => {
this.$refs.customLoading.hideLoading();
});
}
};
</script>
~~~
* **步骤 3：在页面 / 业务中调用**
需要显示 loading 时，用`uni.$emit`触发：
js
~~~js
// 某个页面的 js 中
uni.$emit("showCustomLoading", "数据加载中...");
// 数据请求完成后隐藏
setTimeout(() => {
uni.$emit("hideCustomLoading");
}, 2000);
~~~
### 二、修改下拉刷新的 loading 样式（页面下拉刷新场景）
uniapp 页面下拉刷新的 loading ，可通过`pages.json`或页面内配置自定义：
1. **通过`pages.json`全局 / 页面级配置**
在`pages.json`中，给需要下拉刷新的页面配置`enablePullDownRefresh`，并自定义样式：
json
~~~json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"enablePullDownRefresh": true,
"pullDownRefresh": {
"color": "#00FFFF", // 下拉刷新 loading 图标颜色（仅改变图标颜色，若要换图需结合其他方式）
"style": "default", // 默认可选 default（小圆点），若想自定义更复杂样式，需自己实现
// 若想完全自定义下拉刷新的 loading 外观，可结合页面内的自定义组件覆盖默认
}
}
}
]
}
~~~
但默认配置只能改颜色、基础样式，若想替换成自定义图片，需自己实现下拉刷新逻辑（绕过 uniapp 原生的下拉刷新）：
2. **自定义下拉刷新组件（替代原生下拉刷新）**
* **步骤 1：禁用原生下拉刷新**
在`pages.json`对应页面关闭原生下拉刷新：
json
~~~json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"enablePullDownRefresh": false
}
}
]
}
~~~
* **步骤 2：自己实现下拉刷新逻辑 + 自定义 loading 图**
在页面中用`scroll-view`模拟下拉刷新，搭配自定义 loading 组件：
html
~~~html
<template>
<scroll-view
class="scroll-view"
scroll-y
@refresherpulling="onRefresherPulling"
@refresherrefresh="onRefresherRefresh"
@refresherrestore="onRefresherRestore"
@refresherabort="onRefresherAbort"
:refresher-enabled="true"
:refresher-threshold="80"
:refresher-default-style="refresherStyle"
>
<!-- 自定义 loading 区域 -->
<view class="custom-refresher" v-show="isRefreshing">
<image class="refresher-img" :src="refresherImg"></image>
<text class="refresher-text">{{refresherText}}</text>
</view>
<!-- 页面内容 -->
<view class="content">
<!-- 你的页面内容 -->
</view>
</scroll-view>
</template>
<script>
export default {
data() {
return {
isRefreshing: false,
refresherImg: "/static/pull-refresh.png", // 自定义下拉 loading 图
refresherText: "下拉刷新...",
refresherStyle: {
backgroundColor: "#f5f5f5"
}
};
},
methods: {
onRefresherPulling() {
this.refresherText = "松开刷新...";
},
onRefresherRefresh() {
this.isRefreshing = true;
this.refresherText = "加载中...";
// 模拟请求数据
setTimeout(() => {
this.isRefreshing = false;
this.refresherText = "下拉刷新...";
// 结束下拉刷新
this.$refs.scrollView && this.$refs.scrollView.finishPullToRefresh();
}, 2000);
},
onRefresherRestore() {
this.refresherText = "下拉刷新...";
},
onRefresherAbort() {
this.refresherText = "下拉刷新...";
}
}
};
</script>
<style scoped>
.scroll-view {
width: 100%;
height: 100%;
}
.custom-refresher {
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx 0;
}
.refresher-img {
width: 60rpx;
height: 60rpx;
}
.refresher-text {
margin-top: 10rpx;
}
.content {
padding: 20rpx;
}
</style>
~~~
### 三、总结
* **全局页面加载（启动、跳转）**：简单需求用`manifest.json`配置；复杂、灵活需求用**自定义全局组件 + 事件通信**。
* **下拉刷新 loading**：原生配置只能改基础样式，若要换图，需**自己用`scroll-view`实现下拉逻辑**，搭配自定义图片 / 动画。
根据实际场景选对应的方式，就能替换成你想要的 loading 图片啦，比如品牌专属的加载动画、更贴合 UI 风格的静态图等 。
