前言:在进行开发中,难免会遇到与客户进行交互的问题,好的交互不仅可以增加用户体验也可以让程序更加完美。比如PC端常用的ElementUI中的Message,今天我们来看一看uniapp原生的交互。
目录:
- 一.uni.showToast(OBJECT)
- 1.概述
- 2.OBJECT参数
- (1).icon值说明
- (2).position 值说明（仅App生效）
- 3.举例
- 二.uni.hideToast()
- 1.概述
- 2.举例
- 三.uni.showLoading(OBJECT)
- 1.概述
- 2.OBJECT参数说明
- 3.举例
- 四.uni.hideLoading()
- 1.概述
- 2.举例
一.uni.showToast(OBJECT)
1.概述
显示消息提示框
2.OBJECT参数
参数 | 类型 | 必填 | 说明 |
title | String | 是 | 提示的内容，长度与 icon 取值有关。 |
icon | String | 否 | 图标,参数见下方说明 |
image | String | 否 | 自定义图标的本地路径（app端暂不支持gif） |
mask | Boolean | 否 | 是否显示透明蒙层，防止触摸穿透，默认：false |
duration | Number | 否 | 提示的延迟时间，单位毫秒，默认：1500 |
position | String | 否 | 纯文本轻提示显示位置，填写有效值后只有 title 属性生效，且不支持通过 uni.hideToast 隐藏。参数详见下方说明。 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
(1).icon值说明
值 | 说明 |
success | 显示成功图标，此时 title 文本在小程序平台最多显示 7 个汉字长度。 |
error | 显示错误图标，此时 title 文本在小程序平台最多显示 7 个汉字长度。 |
fail | 显示错误图标，此时 title 文本无长度显示。 |
exception | 显示异常图标。此时 title 文本无长度显示。 |
loading | 显示加载图标，此时 title 文本在小程序平台最多显示 7 个汉字长度。 |
none | 不显示图标，此时 title 文本在小程序最多可显示两行，App仅支持单行显示。 |
(2).position 值说明（仅App生效）
值 | 说明 |
top | 居上显示 |
center | 居中显示 |
bottom | 居底显示 |
3.举例
注意:默认为success图标
uni.showToast({
title:'打开消息提示'
})
二.uni.hideToast()
1.概述
顾名思义,这个api就是隐藏消息提示框
2.举例
uni.hideToast()
三.uni.showLoading(OBJECT)
1.概述
显示 loading 提示框,通常我们可以使用在进行网络请求或者在进行下一步操作中使用。
2.OBJECT参数说明
参数 | 类型 | 必填 | 说明 |
title | String | 是 | 提示的文字内容，显示在loading的下方 |
mask | Boolean | 否 | 是否显示透明蒙层，防止触摸穿透，默认：false |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
3.举例
uni.showLoading({
title:'加载中...'
})
四.uni.hideLoading()
1.概述
隐藏 loading 提示框
2.举例
const uploadImage = (url, data) => {
uni.showLoading({
title: '加载中'
});
return new Promise((resolve, reject) => {
uni.uploadFile({
url: BASE_URL + url,
filePath: data,
name: 'file',
formData: {},
success: (uploadFileRes) => {
let parms = uploadFileRes.data
resolve(parms)
uni.hideLoading();
},
fail: () => {
uni.hideLoading();
uni.showToast({
title: '图片上传失败',
icon: 'none'
})
}
});
})
}