当前位置：首页 > news >正文

微信小程序的四种弹窗使用

news 来源：原创 2024/9/20 23:47:59

在做小程序的过程中，弹窗也算是非常实用的功能了，这几天写的几个功能就用到了弹窗，也可能是初学者的问题，比较菜，想找一个可以带图片的自定义的弹窗，，这里简单介绍一下官方封装好的四个弹窗，感觉适合简单的使用，，想在展示多点内容就不太够了。。

一、wx.showModal

微信小程序提供的用于显示模态对话框的 API，它允许开发者创建一个居中显示的弹窗，用来显示重要信息或请求用户确认操作。

参数说明：

标题（title）：弹窗的标题，可以自定义。
内容（content）：弹窗显示的具体内容，可以是文本或 HTML 格式。
显示取消按钮（showCancel）：是否显示取消按钮，默认为 true。
取消按钮文案（cancelText）：自定义取消按钮的文案，默认为“取消”。
取消按钮颜色（cancelColor）：自定义取消按钮的文字颜色。
确定按钮文案（confirmText）：自定义确定按钮的文案，默认为“确定”。
确定按钮颜色（confirmColor）：自定义确定按钮的文字颜色。

代码演示

wx.showModal({title: '提示',content: '这是一个模态弹窗，需要用户确认操作。',success: function (res) {if (res.confirm) {console.log('用户点击确定');// 用户点击确定后的逻辑处理} else if (res.cancel) {console.log('用户点击取消');// 用户点击取消后的逻辑处理}},fail: function (err) {console.error('弹窗失败', err);// 弹窗失败的错误处理}
});

二、wx.showActionSheet

微信小程序中用于显示操作菜单（Action Sheet）的 API，它提供了一种从屏幕底部弹出的菜单选项，供用户选择操作。
参数说明：
itemList：按钮的文字数组，数组长度最大为6，这是必需的参数。
itemColor：按钮的文字颜色，默认为 #000000。
success：接口调用成功的回调函数，回调参数 res 包含 tapIndex，表示用户点击的按钮序号，从上到下的顺序，从0开始。
fail：接口调用失败的回调函数。
complete：接口调用结束的回调函数（调用成功、失败都会执行）。

代码演示

wx.showActionSheet({itemList: ['选项1', '选项2', '选项3'],itemColor: '#FF0000', // 自定义文字颜色success (res) {if (!res.cancel) {console.log(res.tapIndex);// 这里可以根据点击的索引执行相应操作}},fail (res) {console.log(res.errMsg);}
});

三、 wx.showLoading

微信小程序提供的 API，用于在屏幕上显示一个加载提示框，通常用于数据加载或进行某些耗时操作时告知用户正在处理中。

参数说明：
title：字符串类型，显示的提示内容，默认为 “加载中”。
mask：布尔类型，是否显示透明蒙层，防止触摸穿透，默认为 false。
代码演示：

// 显示加载提示框
wx.showLoading({title: '数据加载中',mask: true
});// 假设进行一些异步操作
setTimeout(() => {// 隐藏加载提示框wx.hideLoading();// 如果需要，可以执行其他操作
}, 2000);

四、wx.showToast

微信小程序提供的 API，用于在屏幕上显示一个轻量级的消息提示框（Toast），用来给用户反馈操作结果或状态信息。
参数说明：
title：字符串类型，显示的消息内容。
icon：字符串类型，图标类型，有效值包括 success、loading 和 none，默认为 none。
duration：数字类型，提示的显示时间，单位毫秒，默认为 2000 毫秒。
mask：布尔类型，是否显示透明蒙层，默认为 false。
success：函数类型，接口调用成功的回调函数。
fail：函数类型，接口调用失败的回调函数。
complete：函数类型，接口调用结束的回调函数（调用成功、失败都会执行）。
代码演示：

// 显示成功的提示
wx.showToast({title: '操作成功',icon: 'success'
});// 显示加载中的提示
wx.showToast({title: '加载中',icon: 'loading'
});// 自定义显示时间
wx.showToast({title: '自定义时长',duration: 3000
});