微信小程序四种弹窗方式实例

网友投稿 3017 2023-11-11

−目录一、wx.showToast(Object object)二 、wx.showModal(Object object)三、wx.showLoading(Object object)四、wx.showActionSheet(Object object)五、官方文档总结

一、wx.showToast(Object object)

显示消息提示框

?
1
2
3
4
5
6
wx.showToast({
title: 内容, //提示的内容
duration: 2000, //持续的时间
icon: loading, //图标有success、error、loading、none四种
mask: true //显示透明蒙层 防止触摸穿透
})

微信小程序四种弹窗方式实例

示例：

二 、wx.showModal(Object object)

显示模态对话框

示例：

三、wx.showLoading(Object object)

显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

?
1
2
3
4
5
6
7
wx.showLoading({
title: 加载中,
})
setTimeout(function () {
wx.hideLoading()
}, 2000)

示例：

注意：

wx.showLoading 和 wx.showToast 同时只能显示一个wx.showLoading 应与 wx.hideLoading 配对使用

四、wx.showActionSheet(Object object)

显示操作菜单

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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(取消选项)
}
})

示例：

五、官方文档

具体参数可见官网：微信小程序弹窗

总结

您可能感兴趣的文章:微信小程序常用的3种提示弹窗实现详解微信小程序实现漂亮的弹窗效果微信小程序弹窗组件使用详解微信小程序 弹窗自定义实例代码微信小程序实现底部弹窗微信小程序实现点击出现弹窗微信小程序表单弹窗实例微信小程序 弹窗输入组件的实现解析

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 实例 小程序
上一篇:微信小程序实现手写签名(签字版)
下一篇:微信小程序实现一键登录
相关文章

 发表评论

暂时没有评论，来抢沙发吧~