小程序中展示弹窗有四种方式:
showToast、showModal、showLoading、showActionSheet
显式消息提示框
有如下一些属性:
| 属性 | 类型 | 默认值 | 必填说明 | |
|---|---|---|---|---|
| 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);
}
})
显示模态对话框
常见属性如下:
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| 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);
}
})
显示 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);
}
})
显示操作菜单
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| alertText | string | 否 | 警示文案 | |
| itemList | Array.<string> | 是 | 按钮的文字数组，数组长度最大为 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);
}
})
注意
wx.showToast和wx.showLoading同时只能显示一个
wx.showLoading和wx.hideLoading配对使用
