目录
- 展示弹窗常见的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.<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配对使用