微信小程序> 微信小程序弹窗,微信小程序中的各种弹窗API

微信小程序弹窗,微信小程序中的各种弹窗API

浏览量:675 时间: 来源:来自远古时代的pansy
wx.showToast(OBJECT)显示消息提示框。
OBJECT参数说明:
参数类型必填说明最低版本titleString是提示的内容iconString否图标,有效值"success"、"loading"imageString否自定义图标的本地路径,image的优先级高于icondurationNumber否提示的延迟时间,单位毫秒,默认:1500maskBoolean否是否显示透明蒙层,防止触摸穿透,默认:falsesuccessFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)
示例代码:
wx.showToast({title:'成功',icon:'success',duration:2000})wx.showLoading(OBJECT)基础库版本1.1.0开始支持,低版本需做
显示loading提示框,需主动调用才能关闭提示框
OBJECT参数说明:
参数类型必填说明titleString是提示的内容maskBoolean否是否显示透明蒙层,防止触摸穿透,默认:falsesuccessFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)wx.hideToast()隐藏消息提示框
wx.hideLoading()基础库版本1.1.0开始支持,低版本需做
隐藏loading提示框
wx.showLoading({title:'加载中',})setTimeout(function(){wx.hideLoading()},2000)wx.showModal(OBJECT)​显示模态弹窗
OBJECT参数说明:
参数类型必填说明titleString是提示的标题contentString是提示的内容showCancelBoolean否是否显示取消按钮,默认为truecancelTextString否取消按钮的文字,默认为"取消",最多4个字符cancelColorHexColor否取消按钮的文字颜色,默认为"#000000"confirmTextString否确定按钮的文字,默认为"确定",最多4个字符confirmColorHexColor否确定按钮的文字颜色,默认为"#3CC51F"successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)succes返回参数说明:
参数类型说明最低版本confirmBoolean为true时,表示用户点击了确定按钮cancelBoolean为true时,表示用户点击了取消(用于Android系统区分点击蒙层关闭还是点击取消按钮关闭)示例代码:
wx.showModal({title:'提示',content:'这是一个模态弹窗',success:function(res){if(res.confirm){console.log('用户点击确定')}elseif(res.cancel){console.log('用户点击取消')}}})wx.showActionSheet(OBJECT)​显示操作菜单
OBJECT参数说明:
参数类型必填说明itemListStringArray是按钮的文字数组,数组长度最大为6个itemColorHexColor否按钮的文字颜色,默认为"#000000"successFunction否接口调用成功的回调函数,详见返回参数说明failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)success返回参数说明:
参数类型说明tapIndexNumber用户点击的按钮,从上到下的顺序,从0开始示例代码:
wx.showActionSheet({itemList:['A','B','C'],success:function(res){console.log(res.tapIndex)},fail:function(res){console.log(res.errMsg)}})Bug&Tipbug:Android6.3.30,wx.showModal的返回的confirm一直为true;tip:wx.showActionSheet点击取消或蒙层时,回调fail,errMsg为"showActionSheet:failcancel";tip:wx.showLoading和wx.showToast同时只能显示一个,使用wx.hideToast/wx.hideLoading都可以关闭提示框;tip:iOSwx.showModal点击蒙层不会关闭模态弹窗,所以尽量避免使用“取消”分支中实现业务逻辑。完整示例!--test.wxml--viewbuttonbindtap="popSuccessTest"成功提示弹窗/buttonbuttonbindtap="popMaskTest"带透明蒙层的弹窗/buttonbuttonbindtap="popTest"纯文字弹窗/buttonbuttonbindtap="popCustomIcon"自定义图标/buttonbuttonbindtap="popConfirm"confirm的弹窗/buttonbuttonbindtap="popLoading"加载弹窗/buttonbuttonbindtap="popSelect"选择框弹窗/button/view//test.jsPage({popSuccessTest:function(){wx.showToast({title:'成功提示弹窗',icon:'',//默认值是success,就算没有icon这个值,就算有其他值最终也显示successduration:2000,//停留时间})},popMaskTest:function(){wx.showToast({title:'带蒙层的弹窗',duration:2000,mask:true//是否有透明蒙层,默认为false//如果有透明蒙层,弹窗的期间不能点击文档内容})},popTest:function(){wx.showToast({title:'纯文字弹窗',icon:'none',//如果要纯文本,不要icon,将值设为'none'duration:2000})},popCustomIcon:function(){wx.showToast({title:'自定义图标弹窗',image:'../../static/image/icon.png',//image的优先级会高于iconduration:2000})},popConfirm:function(){wx.showModal({title:'confirm的弹窗',content:'确认要删除该项吗?',success:function(res){if(res.confirm){console.log('点击确认回调')}else{console.log('点击取消回调')}}})},popLoading:function(){wx.showLoading({title:'加载中...'})//隐藏loading提示框setTimeout(function(){wx.hideLoading()},2000)},popSelect:function(){wx.showActionSheet({itemList:['A','B','C'],success:function(res){console.log(res);}})}});

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎