uni.showLoading({ title: '加载中' }); 代码解释
时间: 2024-04-29 11:20:13 浏览: 10
uni.showLoading是uni-app中提供的一个API,用于显示加载提示框。其中,{ title: '加载中' }是一个配置对象,用于设置加载提示框的标题。该方法调用后,会在页面上显示一个加载提示框,提示用户当前页面正在加载中,可以让用户等待页面加载完成。在页面加载完成后,可以通过uni.hideLoading方法来隐藏加载提示框。
相关问题
uni.showLoading
uni.showLoading 是一个在前端开发中常用的方法,用于显示加载提示框。它需要在代码中主动调用 uni.hideLoading 才能关闭提示框。
示例代码中,uni.showLoading({ title: '加载中' }); 可以显示一个带有"加载中"文本的加载提示框。
如果需要定时关闭隐藏加载效果,可以使用 setTimeout 方法来延时一定时间后调用 uni.hideLoading() 方法来关闭加载提示框。例如:uni.showLoading({ title: '加载中' }); setTimeout(function () { uni.hideLoading(); }, 2000); 表示在2秒后自动关闭加载提示框。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [uni-app点击按钮显示 loading 提示框-uni.showLoading(OBJECT)](https://blog.csdn.net/m0_67393413/article/details/123215094)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [uniapp自带的Loading加载效果(uni.showLoading)](https://blog.csdn.net/m0_75047254/article/details/131755365)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
unapp自定义uni.showLoading样式
您可以使用 `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 中定义此类名的样式来修改加载图标的样式。