uniapp 中的交互反馈 API【提示框】

• 1. 前言
  2. toast 消息提示
  3. loading 提示框
  4. modal 模态弹窗

1. 前言

---

uniapp 交互反馈文档: uni.showToast(OBJECT) | uni-app官网

消息提示 是项目中不可缺少一个功能，比如: 表单提交成功后的提示，操作成功后的提示，此外，询问框和加载动画也是经常使用。uniapp 提供了该 API，详细用法参考官方文档 API - 界面 - 交互反馈 章节

2. toast 消息提示

---

使用 uni.showToast 显示消息提示框:

1. uni.showToast(object)

object 常用参数说明:

参数	类型	必填	说明
title	string	是	提示的内容，可显示的长度和 icon 取值有关
icon	string	否	提示框的图标，可取值详见下方说明
mask	boolean	否	是否防止触摸穿透，默认 false。一般会设置为 true
duration	number	否	提示框的显示时间，单位毫秒，默认 1500

最简单的用法:

1. uni.showToast({ title: '操作成功' })

常用的参数选项:

1. uni.showToast({
2. title: '提交成功',
3. mask: true,
4. icon: 'success',
5. duration: 2000
6. })

消息提示在项目中需要大量使用，并且有的地方还需要提示后进行页面跳转，那么我们可以进行封装:

下面只是简单的封装，仅提供思路，项目中需要封装的更加完善

1. /**
2. * 消息提示,支持页面跳转
3. */
4. function toast(options, navigate) {
5. let { icon, mask, duration, title } = options
6. icon = icon || "none"
7. mask = mask || true
8. duration = duration || 1500
9. title = typeof options === "string" ? options : title
10. // 消息提示
11. uni.showToast({ icon, mask, duration, title })
12. // 页面跳转
13. const dataType = typeof navigate
14. if (["string", "object"].includes(dataType)) {
15. setTimeout(() => {
16. switch (dataType) {
17. case "string":
18. uni.navigateTo({ url: navigate })
19. break
20. case "function":
21. navigate()
22. break
23. }
24. }, duration)
25. }
26. }

然后就可以更加方便的使用消息提示框:

1. toast('操作成功')
2. toast('操作成功', '/pages/login/login')
3. toast('操作成功', () => {
4. // 消息提示消失后自动执行该函数
5. })

3. loading 提示框

---

使用 uni.showLoading(object) 提示框，可以显示一个加载动画，一般用于请求时间比较久的操作，比如: 文件上传

object 常用参数说明:

参数	类型	必填	说明
title	string	是	提示的内容
mask	boolean	否	是否防止触摸穿透，默认 false。一般会设置为 true

1. uni.showLoading({ title: '上传中' })
2. uni.showLoading({ title: '上传中', mask: true })

需要注意的是，loading 提示框需要主动调用 uni.hideLoading() 才能关闭提示框

1. uni.showLoading({ title: '上传中', mask: true })
2. setTimeout(() => {
3. uni.hideLoading()
4. }, 2000);

loading 提示框封装示例:

1. /**
2. * 消息提示,支持页面跳转
3. */
4. toast(options, navigate) {
5. // ...
6. },
7. /**
8. * 显示加载动画
9. */
10. loading(options) {
11. let { title, mask = true } = options
12. title = typeof options === "string" ? options : title
13. uni.showLoading({ mask, title })
14. },
15. /**
16. * 隐藏加载动画,支持页面跳转
17. */
18. hideLoading(options, navigate) {
19. uni.hideLoading()
20. this.toast(options, navigate)
21. }

4. modal 模态弹窗

---

uni.showModal(object) 模态弹窗

可以只有一个确定按钮，也可以同时有确认和取消按钮，类似于一个 API 中整合了 js 中的 alert、confirm

1. uni.showModal({
2. title: '确认删除吗?', // 标题
3. content: '永久删除不可恢复', // 内容(灰色字体)
4. showCancel: true, // 显示取消按钮
5. cancelText: '取消', // 取消按钮文字
6. cancelColor: '#000000', // 取消按钮颜色
7. confirmText: '确定', // 确定按钮文字
8. confirmColor: '#007aff', // 确定按钮颜色
9. editable: false, // 是否显示输入框
10. placeholderText: '请输入' ,// 显示输入框时的提示文本
11. success: ({ confirm }) => {
12. if (confirm) {
13. console.log('用户点击确定');
14. } else {
15. console.log('用户点击取消');
16. }
17. }
18. })

一个按钮的模态弹窗，类似 js 的 alert 弹窗

1. uni.showModal({
2. title: '证件已上传，后台审核中 ~',
3. showCancel: false,
4. confirmText: "我知道了",
5. success: ({ confirm }) => {
6. console.log(confirm);
7. if (confirm) {
8. console.log('用户点击确定');
9. }
10. }
11. })

两个按钮的模态弹窗，类似 js 的 confirm 弹窗

1. uni.showModal({
2. title: '确认删除吗?',
3. success: ({ confirm }) => {
4. console.log(confirm);
5. if (confirm) {
6. console.log('用户点击确定');
7. } else {
8. console.log('用户点击取消');
9. }
10. }
11. })