uni.showLoading完整案例
时间: 2023-04-10 20:04:40 浏览: 153
非常感谢您的提问,以下是 uni.showLoading 的完整案例:
uni.showLoading({
title: '加载中',
mask: true
});
这个函数可以在小程序中显示一个加载中的提示框,其中 title 参数表示提示框中显示的文字内容,mask 参数表示是否显示遮罩层。
相关问题
uniapp的uni.showLoading
### uni.showLoading 的使用方法
`uni.showLoading` 是 UniApp 提供的一个用于展示加载提示框的 API,主要用于在执行耗时操作或发起网络请求时向用户提供反馈。以下是关于 `uni.showLoading` 的具体用法、参数说明以及注意事项。
#### 基本语法
```javascript
uni.showLoading({
title: '加载中...', // 加载提示的文字内容,默认为空字符串
mask: false // 是否显示透明蒙层,防止触摸穿透,默认为false
});
```
#### 参数详解
| 参数名 | 类型 | 默认值 | 描述 |
|--------|--------|---------|----------------------------------------------------------------------|
| `title` | String | '' | 设置加载提示框中的文字内容[^1] |
| `mask` | Boolean| `false` | 如果设置为 true,则会显示一个透明遮罩层,阻止用户点击背景区域的操作[^3] |
#### 示例代码
以下是一个完整的示例,展示了如何结合 `uni.showLoading` 和 `uni.hideLoading` 实现加载提示功能:
```javascript
// 显示加载提示框
uni.showLoading({
title: '数据加载中...',
mask: true
});
// 模拟异步操作(如网络请求)
setTimeout(() => {
// 隐藏加载提示框
uni.hideLoading();
}, 2000);
```
上述代码片段中,通过调用 `uni.showLoading` 方法来启动加载提示框,并设置了标题和蒙层属性。随后,在模拟的异步操作完成后,调用了 `uni.hideLoading()` 手动关闭加载提示框。
#### 注意事项
- **手动关闭**:一旦调用了 `uni.showLoading`,开发者需要显式地调用 `uni.hideLoading` 来隐藏加载提示框,否则它将一直保持可见状态。
- **性能优化**:如果频繁触发加载提示框,建议合理控制其显示时间,避免影响用户体验。
---
### 结合实际场景的应用案例
假设我们需要在一个页面上发送 HTTP 请求并显示加载动画,可以按照如下方式实现:
```javascript
// 开启加载提示
uni.showLoading({
title: '正在获取数据...'
});
// 发起网络请求
uni.request({
url: 'https://www.example.com/api/data',
method: 'GET',
success(res) {
console.log('成功:', res.data);
},
fail(err) {
console.error('失败:', err);
},
complete() {
// 不论成功还是失败,都需关闭加载提示
uni.hideLoading();
}
});
```
此代码片段综合了 `uni.showLoading` 和 `uni.request` 的使用,确保在网络请求完成之后及时关闭加载提示框[^2]。
---
uni.showToast({
### uni-app 中 `showToast` 方法的使用说明
#### 基本功能描述
`showToast` 是一种轻量级的消息提示方式,通常用于向用户展示短暂的信息反馈。它属于弹窗提示类 API,在小程序开发中有广泛应用[^3]。
#### 参数结构
调用 `uni.showToast` 需要传入一个对象作为参数,该对象支持以下字段:
| 字段名 | 类型 | 是否必填 | 描述 |
|-------------|---------|----------|----------------------------------------------------------------------------------------|
| title | String | 是 | 提示框的文字内容 |
| icon | String | 否 | 图标样式,可选值为 `"success"` 或 `"none"` |
| image | String | 否 | 自定义图标路径 |
| duration | Number | 否 | 提示框停留时间,默认为 1500 毫秒 |
| mask | Boolean | 否 | 是否显示透明蒙层,防止触摸穿透 |
注意:如果设置了 `icon` 属性,则不可同时设置 `image` 属性;反之亦然[^2]。
#### 示例代码
以下是几个典型的 `showToast` 调用案例:
```javascript
// 显示简单的成功提示
uni.showToast({
title: '操作成功',
icon: 'success'
});
// 显示无图标的纯文字提示
uni.showToast({
title: '加载中...',
icon: 'none' // 不带图标
});
// 设置自定义图片作为图标
uni.showToast({
title: '自定义图标',
image: '/static/custom-icon.png', // 替换为实际路径
duration: 2000
});
```
#### 特殊行为注意事项
由于底层设计原因,`showToast` 和 `showLoading` 实际上共享同一套机制,因此两者可能会互相影响。具体表现为:
- 如果先调用了 `showToast`,再调用 `showLoading`,则前者会被后者覆盖;
- 反之,若先调用了 `showLoading`,随后又调用 `showToast`,同样会发生覆盖现象;
- 此外,调用 `hideLoading` 也可能意外关闭由 `showToast` 创建的提示框[^1]。
为了避免上述冲突情况的发生,建议开发者合理安排两者的调用顺序,并尽量减少在同一时间段内频繁切换它们的行为。
---
阅读全文
相关推荐








