1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序弹窗提示:wx.showToast wx.showModal wx.showLoading的使用场景与实现

微信小程序弹窗提示:wx.showToast wx.showModal wx.showLoading的使用场景与实现

时间:2021-07-17 13:30:45

相关推荐

微信小程序弹窗提示:wx.showToast wx.showModal wx.showLoading的使用场景与实现

1、wx.showToast

使用场景:常规的提示,没有确定和取消按钮。

例:

属性:

title:提示的内容

icon:显示的图标,合法值有success、error、loading、none

image:自定义图标的本地路径,优先级高于icon

duration:提示的延迟时间

mask:是否显示透明蒙层,防止触摸穿透

success:API调用成功后的回调函数

fail:API调用失败后的回调函数

complete:API调用结束的回调函数(无论成功与否都会执行)

实现:

wx.showToast({title: '成功',icon: 'success',duration: 2000})

2、wx.showModal

使用场景:一般为公告或(用户的不合理行为)提供提示,带有确定和取消按钮。

例:

属性:

title:提示的标题

content:提示的内容

showCancel:是否显示取消按钮

cancelText:取消按钮的文字,最多4个字符

cancelColor:取消按钮的文字颜色,必须是16进制格式的颜色字符串

confirmText:确认按钮的文字,最多4个字符

confirmColor:确认按钮的文字颜色,必须是16进制格式的颜色字符串

editable:是否显示输入框

placeholderText:显示输入框时的提示文本

success:接口调用成功的回调函数

fail:接口调用失败的回调函数

complete:接口调用结束的回调函数(调用成功、失败都会执行)

示例:

wx.showModal({title: '提示',content: '这是一个模态弹窗',success (res) {if (res.confirm) {console.log('用户点击确定')} else if (res.cancel) {console.log('用户点击取消')}}})

3、wx.showLoading

使用场景:用户等待时的提示

例:

属性:

title:提示的内容

mask:是否显示透明蒙层,防止触摸穿透

success:接口调用成功的回调函数

fail:接口调用失败的回调函数

complete:接口调用结束的回调函数(调用成功、失败都会执行)

示例:

wx.showLoading({title: '加载中',})setTimeout(function () {wx.hideLoading()}, 2000)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。