6.4 交互API
使用交互API可以在小程序中显示各种弹窗或动画，达到交互反馈的目的。
6.4.1 提示框API
使用wx.showToast接口可显示消息提示框。接口接受Object参。属性如下：
title（必填） 提示的内容
icon 图标，可选值为success（默认）、loading和none
image 自定义图标的本地路径，优先级高于icon
duration 提示框的显示时长，单位为毫秒，默认1500
mask 是否显示透明蒙层，防止触摸穿透
success
fail
complete
示例代码如下：
wx.showToast({
title: '成功',
icon:'success',
duration: 2000
})
使用wx.hideToast接口可提前关闭消息提示框。该接口接受Object参，支持三回调。
也可使用wx.showLoading接口显示loading提示框，该接口接受Object参，支持的属性包括title（必填）、mask、duration、三回调。当duration未填写时，loading提示框会一直存在，必须主动调用wx.hideLoading接口才能关闭提示框。
示例代码如下：
wx.showLoading({
title: '加载中',
})
// 2秒后关闭提示框(通常的做法是在网络请求前显示提示框，然后在complete回调中关闭提示框)
setTimeout(() => {
wx.hideLoading()
},2000)
6.4.2 对话框API
使用wx.showModal接口可显示模态对话框。接口接受Object参。属性如下：
title 提示的标题
content 提示的内容
showCancel 是否显示取消按钮，默认true
cancelText 取消按钮的文字，最多四字符，默认取消
cancelColor 取消按钮的文字颜色，默认#000000
confirmText 确认按钮的文字，最多四字符，默认确认
confirmColor 确认按钮的文字颜色，默认#576B95
success
fail
complete
示例代码如下：
wx.showModal({
title: '提示',
content: '这是一个事态弹窗',
success(res){
if (res.confirm) {
console.log('用户单击确定')
}else if (res.cancel) {
console.log('用户单击取消')
}
},
complete: (res) => {
if (res.cancel) {
}
if (res.confirm) {
}
}
})
网友评论