使用交互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)
使用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)?{
????????
??????}
????}
??})