微信小程序四种弹窗方式实例
更新时间：2023年06月12日 15:37:21 作者：哒不溜-w
微信小程序弹窗是小程序在需要提示用户的时候,显示的一种交互形式,下面这篇文章主要给大家介绍了关于微信小程序四种弹窗方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
一、wx.showToast(Object object)
显示消息提示框
wx.showToast({
title: '内容', //提示的内容
duration: 2000, //持续的时间
icon: 'loading', //图标有success、error、loading、none四种
mask: true //显示透明蒙层 防止触摸穿透
})示例：
二 、wx.showModal(Object object)
显示模态对话框
wx.showModal({
title: '我是标题', //提示的标题
content: '我是内容', //提示的内容
success: function(res) {
if(res.confirm) {
console.log('用户点击了确定')
} else if (res.cancel) {
console.log('用户点击了取消')
}
}
})示例：
三、wx.showLoading(Object object)
显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
wx.showLoading({
title: '加载中',
})
setTimeout(function () {
wx.hideLoading()
}, 2000)
示例：
注意：
wx.showLoading 和 wx.showToast 同时只能显示一个wx.showLoading 应与 wx.hideLoading 配对使用
四、wx.showActionSheet(Object object)
显示操作菜单
wx.showActionSheet({
itemList:['选项一','选项二','其它'], //文字数组
success: (res) => {
switch(res.tapIndex) {
case 0:
console.log('点击了 选项一')
break;
case 1:
console.log('点击了 选项二')
break;
case 2:
console.log('点击了 其它选项')
break;
}
},
fail (res) {
console.log('取消选项')
}
})示例：
五、官方文档
具体参数可见官网：微信小程序弹窗
总结
到此这篇关于微信小程序四种弹窗方式的文章就介绍到这了,更多相关微信小程序弹窗方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了项目中使用Typescript封装axios的示例过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
javascript中sessionStorage的存储机制的使用小结
本文主要介绍了javascript中sessionStorage的存储机制的使用,包括其作用域、生命周期、存储容量、数据类型以及API的使用,具有一定的参考价值,感兴趣的可以了解一下2025-05-05
这篇文章主要介绍了JavaScript通如何过RGraph实现动态仪表盘,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
这篇文章主要介绍了JS Array.from()将伪数组转换成数组的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
本文主要介绍了js自己实现一个大文件切片上传+断点续传的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了js比较日期大小的方法,涉及javascript日期的转化、匹配、比较等常用操作技巧,需要的朋友可以参考下2015-05-05
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
今天小编就为大家分享一篇在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了js制作支付倒计时页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
延迟加载的函数，第一次调用后，会覆盖原来的老函数，以后再次调用的是新函数，不会再进行条件的判断，提升效率2012-10-10
这篇文章主要介绍了JavaScript实现LRU缓存淘汰算法,下面是用 JavaScript 实现 LRU（Least RecentlyUsed,最近最少使用）缓存淘汰算法的代码,并附上详细的步骤解释,需要的朋友可以参考下2024-12-12
最新评论