小程序展示弹窗常见API实例详解

弹窗对我们大家来说应该都不陌生,这篇文章主要给大家介绍了关于小程序展示弹窗常见API的相关资料,主要包括showToast, showModal,showLoading和showActionSheet,需要的朋友可以参考下

展示弹窗常见的API

小程序中展示弹窗有四种方式: showToast、 showModal、 showLoading、 showActionSheet

showToast

显式消息提示框

有如下一些属性:

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

其中icon属性有如下一些值:

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

演示代码

wx.showToast({ title: "购买失败", icon: "error", duration: 100, mask: true, success: (res) => { console.log("展示成功: ", res); }, fail: (err) => { console.log("展示失败: ", err); } })

showModal

显示模态对话框

常见属性如下:

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

演示代码

wx.showModal({ title: "四个二", cancelText: "要不起", cancelColor: '#f00', confirmText: "管上", confirmColor: "skyblue", success: (res) => { console.log("展示成功: ", res); }, fail: (err) => { console.log("展示失败: ", err); } })

在成功的回调函数中, 有如下属性判断用户点击了确定还是取消

属性	类型	说明
content	string	editable 为 true 时，用户输入的文本
confirm	boolean	为 true 时，表示用户点击了确定按钮
cancel	boolean	为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）

wx.showModal({ title: "四个二", cancelText: "取消", confirmText: "确定", success: (res) => { console.log("展示成功: ", res); if (res.cancel) { console.log("用户点击了左边取消按钮"); } else if (res.confirm) { console.log("用户点击了右边确定按钮"); } }, fail: (err) => { console.log("展示失败: ", err); } })

showLoading

显示 loading 提示框。与showToast的区别是, 守卫Loading需主动调用 wx.hideLoading 才能关闭提示框

其中的属性如下:

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

演示代码

wx.showLoading({ title: '加载中', mask: true, success: (res) => { console.log(res); }, fail: (err) => { console.log(err); } })

showActionSheet

显示操作菜单

属性	类型	默认值	必填	说明
alertText	string		否	警示文案
itemList	Array.		是	按钮的文字数组，数组长度最大为 6
itemColor	string	#000000	否	按钮的文字颜色
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行)

演示代码

wx.showActionSheet({ itemList: ["Macbook", "iPad", "iPhone"], itemColor: "#f00", success: (res) => { console.log(res); }, fail: (err) => { console.log(err); } })

成功的回调res中的属性

属性	类型	说明
tapIndex	number	用户点击的按钮序号，从上到下的顺序，从0开始

可以通过tapIndex知道点击了哪个按钮

wx.showActionSheet({ itemList: ["Macbook", "iPad", "iPhone"], itemColor: "#f00", success: (res) => { console.log(res .tapIndex); }, fail: (err) => { console.log(err); } })

注意