微信小程序展示弹窗的几种方式

article/2025/9/21 8:37:46

小程序中展示弹窗有四种方式：`showToast`、`showModal`、`showLoading`、`showActionSheet`

官方文档链接

效果图

在这里插入图片描述

wxml

<!-- 1.消息提示框 -->
<button size="mini" bindtap="handleShowToast">ShowToast</button><!-- 2.模态对话框 -->
<button size="mini" bindtap="handleShowModal">OnShowModal</button><!-- 3.loading提示框 -->
<button size="mini" bindtap="handleShowLoading">OnShowLoading</button><!-- 4.操作菜单 -->
<button size="mini" bindtap="handleShowAction">OnShowActionSheet</button>

js

Page({handleShowToast() {wx.showToast({title: '内容', //提示的内容duration: 2000, //持续的时间icon: 'loading', //图标mask: true //显示透明蒙层 防止触摸穿透})},handleShowModal() {wx.showModal({title: '我是标题', //提示的标题content: '我是内容，111' //提示的内容success: function(res) {if(res.confirm) {console.log('用户点击了确定')} else if(res.cancel) {console.log('用户点击了取消')}}})},handleShowLoading() {wx.showLoading({title: '加载中。。。', //提示的内容masl: true //显示透明蒙层 防止触摸穿透})//showLoading需要调用wx.hideLoading()关闭setTimeOut(() => {wx.hideLoading();}, 2000)},handleShowAction() {wx.showActionSheet({itemList: ['拍照','相机'] //文字数组success: (res) => {switch(res.tapIndex) {case 0:console.log('用户点击了拍照')break;case 1:console.log('用户点击了相机')break;	}}})}
})