交互反馈

Taro.showToast(OBJECT)

显示消息提示框,支持 Promise 化使用。

OBJECT 参数说明:

参数 类型 必填 说明
title String 提示的内容
icon String 图标,有效值 “success”, “loading”, “none”
image String 自定义图标的本地路径,image 的优先级高于 icon
duration Number 提示的延迟时间,单位毫秒,默认:1500
mask Boolean 是否显示透明蒙层,防止触摸穿透,默认:false
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

icon 有效值

有效值 说明
success 显示成功图标
loading 显示加载图标
none 不显示图标

示例代码:

  1. import Taro from '@tarojs/taro'
  2. Taro.showToast({
  3. title: '成功',
  4. icon: 'success',
  5. duration: 2000
  6. })
  7. .then(res => console.log(res))

Taro.showLoading(OBJECT)

显示 loading 提示框, 需主动调用 Taro.hideLoading 才能关闭提示框,支持 Promise 化使用。

OBJECT 参数说明:

参数 类型 必填 说明
title String 提示的内容
mask Boolean 是否显示透明蒙层,防止触摸穿透,默认:false
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

  1. import Taro from '@tarojs/taro'
  2. Taro.showLoading({
  3. title: 'loading'
  4. })
  5. .then(res => console.log(res))

Taro.hideToast()

隐藏消息提示框

Taro.hideLoading()

隐藏 loading 提示框

Taro.showModal(OBJECT)

​显示模态弹窗,支持 Promise 化使用。

OBJECT 参数说明:

参数 类型 必填 说明
title String 提示的标题
content String 提示的内容
showCancel Boolean 是否显示取消按钮,默认为 true
cancelText String 取消按钮的文字,默认为”取消”,最多 4 个字符
cancelColor HexColor 取消按钮的文字颜色,默认为”#000000”
confirmText String 确定按钮的文字,默认为”确定”,最多 4 个字符
confirmColor HexColor 确定按钮的文字颜色,默认为”#3CC51F”
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明:

参数值 类型 说明
confirm Boolean 为 true 时,表示用户点击了确定按钮
cancel Boolean 为 true 时,表示用户点击了取消

示例代码:

  1. import Taro from '@tarojs/taro'
  2. // 注意:无论用户点击确定还是取消,Promise 都会 resolve。
  3. Taro.showModal({
  4. title: 'xxx',
  5. content: 'hello world',
  6. })
  7. .then(res => console.log(res.confirm, res.cancel))

Taro.showActionSheet(OBJECT)

显示操作菜单,支持 Promise 化使用。

OBJECT 参数说明:

参数 类型 必填 说明
itemList String Array 按钮的文字数组,数组长度最大为 6 个
itemColor HexColor 按钮的文字颜色,默认为”#000000”
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明:

参数值 类型 说明
tapIndex Number 用户点击的按钮,从上到下的顺序,从 0 开始
  1. import Taro from '@tarojs/taro'
  2. // 注意:当用户点击选项时 Promise 会 resolve,而当用户点击取消或蒙层时,Promise 会 reject。
  3. Taro.showActionSheet({
  4. itemList: ['a', 'b', 'c']
  5. })
  6. .then(res => console.log(res.errMsg, res.tapIndex))
  7. .catch(err => console.log(res.errMsg))

API 支持度

API 微信小程序 H5 ReactNative
Taro.showToast ✔️ ✔️ ✔️
Taro.showLoading ✔️ ✔️ ✔️
Taro.hideToast ✔️ ✔️ ✔️
Taro.hideLoading ✔️ ✔️ ✔️
Taro.showModal ✔️ ✔️ ✔️
Taro.showActionSheet ✔️ ✔️ ✔️