# 界面API

# showToast

showToast(object)

object 参数

属性 类型 默认值 必填 说明
title title 提示的内容
icon string 'success' 图标
image string 自定义图标的本地路径或 url ,image 的优先级高于 icon
duration number 1500 提示的延迟时间(毫秒)
mask boolean false 是否显示透明蒙层,防止触摸穿透
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.icon 的合法值

说明
success 显示成功图标,此时 title 文本最多显示 7 个汉字长度
error 显示失败图标,此时 title 文本最多显示 7 个汉字长度
loading 显示加载图标,此时 title 文本最多显示 7 个汉字长度
none 不显示图标,此时 title 文本最多可显示两行,1.9.0及以上版本支持

示例

app.showToast({
    title: '成功',
    icon: 'success',
    duration: 2000,      // 2秒
});
app.showToast({
    title: '失败',
    icon: 'error',
    duration: 2000,      // 2秒
    mask: false,
});

# showLoading

showLoading(object)

显示 loading 提示框。支持 promise 风格调用。需主动调用 app.hideLoading 才能关闭提示框。

object 参数

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

示例

app.showLoading({
    title: '加载中',
});

# hideLoading

hideLoading(object)

隐藏 loading 提示框。支持 promise 风格调用。需主动调用 app.hideLoading 才能关闭提示框。

object 参数

属性 类型 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例

app.hideLoading({
    title: '加载中',
    success: () => {
        console.log("success")
    },
    fail: () => {
        console.log("fail")
    },
    complete: () => {
        console.log("complete")
    },
});

# showModal

showModal(object)

显示模态对话框,支持 promise 风格调用

object 参数

属性 类型 默认值 必填 说明
title string 提示的标题
content string 提示的内容
showCancel boolean true 是否显示取消按钮
cancelText string '取消' 取消按钮的文字,最多 4 个字符
cancelColor string #000000 取消按钮的文字颜色,必须是 16 进制格式的颜色字符串
confirmText string '确定' 确认按钮的文字,最多 4 个字符
confirmColor string #576B95 确认按钮的文字颜色,必须是 16 进制格式的颜色字符串
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

属性 类型 说明
content string editable 为 true 时,用户输入的文本
confirm boolean 为 true 时,表示用户单击了确定按钮
cancel boolean 为 true 时,表示用户单击了取消

示例

app.showModal({
    title: '提示',
    content: '这是一个模态弹窗',
    success(res) {
        if (res.confirm) {
            console.log('用户单击确定');
        } else if (res.cancel) {
            console.log('用户单击取消');
        }
    }
});

注意:

  • Android 6.7.2 以下版本,单击取消或蒙层时,回调 fail, errMsg 为 "fail cancel";
  • Android 6.7.2 及以上版本 和 iOS 单击蒙层不会关闭模态弹窗,所以尽量避免使用取消分支中实现业务逻辑
点击咨询小助手