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

2024-09-14 小程序 0

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

一、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});