uniapp自定义uni.showLoading
时间: 2023-11-22 16:37:22 浏览: 391
可以通过在 `uni.showLoading` 方法之前定义一个自定义的 `showLoading` 方法来实现自定义的加载提示。
举个例子,可以在 `App.vue` 文件中定义一个 `showLoading` 方法,然后在需要显示加载提示的地方调用该方法,如下所示:
```javascript
// App.vue
export default {
methods: {
// 自定义 showLoading 方法
showLoading(title = '加载中') {
uni.showLoading({
title,
mask: true
})
}
}
}
```
然后在需要显示加载提示的页面或组件中,直接调用 `showLoading` 方法即可:
```javascript
// somePage.vue
export default {
methods: {
loadData() {
// 显示加载提示
this.$parent.$options.methods.showLoading()
// 发起网络请求
uni.request({
url: 'https://example.com',
success: res => {
// 隐藏加载提示
uni.hideLoading()
// 处理请求结果
console.log(res.data)
},
fail: err => {
// 隐藏加载提示
uni.hideLoading()
// 处理请求错误
console.log(err)
}
})
}
}
}
```
这样就可以在需要的地方调用自定义的 `showLoading` 方法来显示加载提示了。需要注意的是,为了保证加载提示可以正常显示和隐藏,需要在网络请求完成后调用 `uni.hideLoading` 方法来隐藏加载提示。
阅读全文
相关推荐


















