提升用户体验：详细解读 UniApp 中的所有提示功能

Xm__
567 阅读3分钟

UniApp 提示 API (Prompt API) 详解

在 UniApp 中，prompt API 用于显示系统级的提示框，可以用于提示用户信息、输入框或者选择框等，帮助提升用户体验。本文将详细介绍 UniApp 中的提示相关 API，包括其用法、参数、返回值等内容。

1. uni.showToast() - 显示系统提示框

uni.showToast() 用于显示一个提示信息框，提示框展示一段文字并在指定时间后自动消失。

参数：
  • title (String): 提示的内容。
  • duration (Number): 提示框显示的时长，单位为毫秒，默认 1500ms。
  • icon (String): 图标类型，可以为 "success", "loading", 或 "none"。
  • image (String): 自定义图标的路径，可以传入网络图片地址。
  • mask (Boolean): 是否显示透明蒙层，防止用户触摸，默认 false。
示例：
uni.showToast({
  title: '加载成功',
  icon: 'success',
  duration: 2000
});

2. uni.showModal() - 显示模态对话框

uni.showModal() 用于显示一个包含标题、内容和按钮的模态对话框。用户可以选择操作，返回对应的结果。

参数：
  • title (String): 对话框的标题。
  • content (String): 对话框的内容。
  • showCancel (Boolean): 是否显示取消按钮，默认 true。
  • confirmText (String): 确定按钮的文本，默认为“确定”。
  • cancelText (String): 取消按钮的文本，默认为“取消”。
  • success (Function): 用户点击按钮后的回调函数，返回 confirm 和 cancel 两个标志。
示例：
uni.showModal({
  title: '删除提示',
  content: '确认删除此项？',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击了确定');
    } else if (res.cancel) {
      console.log('用户点击了取消');
    }
  }
});

3. uni.showActionSheet() - 显示操作菜单

uni.showActionSheet() 用于显示一个可供选择的操作菜单，类似于手机上的“选项卡”式菜单，用户点击后会触发不同的操作。

参数：
  • itemList (Array): 操作项的文本数组。
  • itemColor (String): 操作项的颜色（可选）。
  • success (Function): 操作成功时的回调函数，返回点击的项的索引。
  • fail (Function): 操作失败时的回调函数，返回失败的原因。
示例：
uni.showActionSheet({
  itemList: ['选项1', '选项2', '选项3'],
  success: function (res) {
    console.log('用户选择了：' + res.tapIndex);
  },
  fail: function (res) {
    console.log('操作失败: ' + res.errMsg);
  }
});

4. uni.showLoading() - 显示加载提示框

uni.showLoading() 用于显示一个加载中的提示框，通常用于等待某些操作（如数据加载、网络请求等）完成。

参数：
  • title (String): 加载提示框的内容，通常为“加载中”。
  • mask (Boolean): 是否显示蒙层，防止触摸其他区域，默认为 false。
  • success (Function): 加载成功后的回调（可选）。
示例：
uni.showLoading({
  title: '加载中...',
  mask: true
});

5. uni.hideToast() - 隐藏提示框

uni.hideToast() 用于手动隐藏正在显示的提示框，通常在需要提前隐藏时使用。

示例：
uni.hideToast();

6. uni.hideLoading() - 隐藏加载提示框

uni.hideLoading() 用于隐藏当前的加载提示框，通常用于异步操作完成后手动关闭加载框。

示例：
uni.hideLoading();

7. uni.prompt() - 显示输入框对话框

uni.prompt() 用于显示一个带输入框的对话框，用户可以输入内容并提交。

参数：
  • title (String): 对话框的标题。
  • message (String): 对话框的消息内容。
  • placeholder (String): 输入框的占位符。
  • inputType (String): 输入框的类型，如 text, number 等。
  • success (Function): 用户点击按钮后的回调函数，返回输入的内容。
示例：
uni.prompt({
  title: '请输入内容',
  message: '请输入您的用户名',
  placeholder: '用户名',
  success: function (res) {
    if (res.confirm) {
      console.log('用户输入：' + res.content);
    }
  }
});

总结

UniApp 提供了多个方便的提示框 API，用于展示信息、进行用户输入、确认操作等。不同的 API 可以帮助开发者更灵活地控制应用的提示交互，提升用户体验。通过使用 uni.showToast(), uni.showModal(), uni.showActionSheet() 等 API，开发者能够快速实现常见的提示需求，而 uni.showLoading() 和 uni.hideLoading() 则帮助我们在数据加载过程中给用户反馈。

avatar
文章
阅读
粉丝