• uni.showToast(OBJECT)
  • uni.hideToast()
  • uni.showLoading(OBJECT)
  • uni.hideLoading()
  • uni.showModal(OBJECT)
  • uni.showActionSheet(OBJECT)

    uni.showToast(OBJECT)

    显示消息提示框。

    OBJECT参数说明

    参数类型必填说明平台差异说明
    titleString提示的内容,长度与 icon 取值有关。
    iconString图标,有效值详见下方说明。
    imageString自定义图标的本地路径5+App、H5、微信小程序、百度小程序
    maskBoolean是否显示透明蒙层,防止触摸穿透,默认:false5+App、微信小程序
    durationNumber提示的延迟时间,单位毫秒,默认:1500
    positionString纯文本轻提示显示位置,填写有效值后只有 title 属性生效, 有效值详见下方说明。5+App
    successFunction接口调用成功的回调函数
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

    icon 值说明

    说明平台差异说明
    success显示成功图标,此时 title 文本最多显示 7 个汉字长度。默认值
    loading显示加载图标,此时 title 文本最多显示 7 个汉字长度。支付宝小程序不支持
    none不显示图标,此时 title 文本在小程序最多可显示两行,5+App仅支持单行显示。

    示例

    1. uni.showToast({
    2. title: '标题',
    3. duration: 2000
    4. });

    position 值说明

    说明
    top居上显示
    center居中显示
    bottom居底显示

    Tips

    App端可通过plus.nativeUI.toast API实现更多功能。

    uni.hideToast()

    隐藏消息提示框。

    示例

    1. uni.hideToast();

    uni.showLoading(OBJECT)

    显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

    OBJECT参数说明

    参数类型必填说明平台差异说明
    titleString提示的内容
    maskBoolean是否显示透明蒙层,防止触摸穿透,默认:false5+App、微信小程序、百度小程序
    successFunction接口调用成功的回调函数
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

    示例

    1. uni.showLoading({
    2. title: '加载中'
    3. });

    uni.hideLoading()

    隐藏 loading 提示框。

    示例

    1. uni.showLoading({
    2. title: '加载中'
    3. });
    4. setTimeout(function () {
    5. uni.hideLoading();
    6. }, 2000);

    uni.showModal(OBJECT)

    显示模态弹窗,类似于标准 html 的消息框:alert、confirm。

    OBJECT参数说明

    参数类型必填说明平台差异说明
    titleString提示的标题
    contentString提示的内容
    showCancelBoolean是否显示取消按钮,默认为 true
    cancelTextString取消按钮的文字,默认为"取消",最多 4 个字符
    cancelColorHexColor取消按钮的文字颜色,默认为"#000000"H5、微信小程序、百度小程序
    confirmTextString确定按钮的文字,默认为"确定",最多 4 个字符
    confirmColorHexColor确定按钮的文字颜色,H5平台默认为"#007aff",微信小程序平台默认为"#3CC51F",百度小程序平台默认为"#3c76ff"H5、微信小程序、百度小程序
    successFunction接口调用成功的回调函数
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

    success返回参数说明

    参数类型说明
    confirmBoolean为 true 时,表示用户点击了确定按钮
    cancelBoolean为 true 时,表示用户点击了取消(用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭)

    Tips:

    • 在 App 下可以使用 原生增强提示框插件 来解决 App 无法设置 cancelColor、confirmColor的问题。示例
    1. uni.showModal({
    2. title: '提示',
    3. content: '这是一个模态弹窗',
    4. success: function (res) {
    5. if (res.confirm) {
    6. console.log('用户点击确定');
    7. } else if (res.cancel) {
    8. console.log('用户点击取消');
    9. }
    10. }
    11. });

    uni.showActionSheet(OBJECT)

    ​显示操作菜单

    OBJECT参数说明

    参数类型必填说明平台差异说明
    itemListArray<String>按钮的文字数组微信、百度、头条小程序数组长度最大为6个
    itemColorHexColor按钮的文字颜色,字符串格式,默认为"#000000"头条小程序不支持
    successFunction接口调用成功的回调函数,详见返回参数说明
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

    success返回参数说明

    参数类型说明
    tapIndexNumber用户点击的按钮,从上到下的顺序,从0开始

    示例

    1. uni.showActionSheet({
    2. itemList: ['A', 'B', 'C'],
    3. success: function (res) {
    4. console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
    5. },
    6. fail: function (res) {
    7. console.log(res.errMsg);
    8. }
    9. });

    Tips

    App端实现原生的、复杂的底部图文菜单,例如分享菜单,可参考https://ext.dcloud.net.cn/plugin?id=69

    注意

    • 本章的所有弹出控件都是原生控件,层级最高,可覆盖video、map、tabbar等原生控件。
    • uni-app插件市场有很多封装好的前端组件,但注意前端组件层级不是最高,无法覆盖原生组件。
    • App端还有原生的prompt API

    发现错误?想参与编辑?在 GitHub 上编辑此页面!