uniapp几个弹窗的使用方法

2021-01-12   阅读:260   分类:前端    标签: uni-app

1、showToast:显示模态弹窗,类似于标准 html 的消息框:alert、confirm。主要用于消息提示框

使用方法:

uni.showToast({
  title: '联系方式格式错误',
  duration: 2000,
  image: '/static/cry.png'
});

参数

类型

必填

说明

平台差异说明

title

String

提示的标题


content

String

提示的内容


showCancel

Boolean

是否显示取消按钮,默认为 true


cancelText

String

取消按钮的文字,默认为"取消",最多 4 个字符


cancelColor

HexColor

取消按钮的文字颜色,默认为"#000000"

H5、微信小程序、百度小程序

confirmText

String

确定按钮的文字,默认为"确定",最多 4 个字符


confirmColor

HexColor

确定按钮的文字颜色,H5平台默认为"#007aff",微信小程序平台默认为"#3CC51F",百度小程序平台默认为"#3c76ff"

H5、微信小程序、百度小程序

success

Function

接口调用成功的回调函数


fail

Function

接口调用失败的回调函数


complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)


2、uni.hideToast():主要用于隐藏消息提示框。

使用方法:

uni.hideToast();

3、uni.showLoading(OBJECT):显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

使用方法:

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

参数

类型

必填

说明

平台差异说明

title

String

提示的内容


mask

Boolean

是否显示透明蒙层,防止触摸穿透,默认:false

App、微信小程序、百度小程序

success

Function

接口调用成功的回调函数


fail

Function

接口调用失败的回调函数


complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)


4、uni.hideLoading():隐藏 loading 提示框。

使用方法:

uni.showLoading({
    title: '加载中'
});
 
setTimeout(function () {
    uni.hideLoading();
}, 2000);

5、 uni.showModal(OBJECT):显示模态弹窗,类似于标准 html 的消息框:alert、confirm。

使用方法:

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

参数

类型

必填

说明

平台差异说明

title

String

提示的标题


content

String

提示的内容


showCancel

Boolean

是否显示取消按钮,默认为 true


cancelText

String

取消按钮的文字,默认为"取消",最多 4 个字符


cancelColor

HexColor

取消按钮的文字颜色,默认为"#000000"

H5、微信小程序、百度小程序

confirmText

String

确定按钮的文字,默认为"确定",最多 4 个字符


confirmColor

HexColor

确定按钮的文字颜色,H5平台默认为"#007aff",微信小程序平台默认为"#3CC51F",百度小程序平台默认为"#3c76ff"

H5、微信小程序、百度小程序

success

Function

接口调用成功的回调函数


fail

Function

接口调用失败的回调函数


complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)


success返回参数说明

参数

类型

说明

confirm

Boolean

为 true 时,表示用户点击了确定按钮

cancel

Boolean

为 true 时,表示用户点击了取消(用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭)

 


【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/579.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×