小程序展示弹窗常见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.<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
配对使用
总结
到此这篇关于小程序展示弹窗常见API的文章就介绍到这了,更多相关小程序展示弹窗API内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!