《微信小程序开发从入门到实战》学习六十三

发布时间:2023年12月26日

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)?{

????????

??????}

????}

??})

文章来源:https://blog.csdn.net/xy2937131682/article/details/135212973
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。