unapp自定义uni.showLoading样式
时间: 2023-12-25 18:03:54 浏览: 520
您可以使用 `uni.showLoading()` 方法的 `mask` 和 `image` 参数来自定义 `uni.showLoading()` 的样式。
例如,您可以创建一个自定义的加载图片,然后将其作为 `image` 参数传递给 `uni.showLoading()` 方法来替换默认的加载图标。
示例代码:
```js
uni.showLoading({
title: '加载中',
mask: true,
image: '/static/custom-loading.png'
})
```
其中:
- `title` 参数为加载提示文字;
- `mask` 参数表示是否显示半透明蒙层;
- `image` 参数表示自定义的加载图片路径。
另外,您还可以在全局配置中设置 `loading` 字段来自定义所有 `uni.showLoading()` 方法的默认样式。
示例代码:
```js
uni.setNavigationBarLoading({
color: '#ffffff',
textVisible: true,
background: '#000000',
customClass: 'my-loading-class'
})
uni.showLoading({
title: '加载中'
})
```
其中:
- `color` 参数表示加载图标的颜色;
- `textVisible` 参数表示是否显示加载提示文字;
- `background` 参数表示蒙层的背景色;
- `customClass` 参数表示自定义的加载图标样式类名。您可以在 CSS 中定义此类名的样式来修改加载图标的样式。
阅读全文
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)