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

id="article_content" class="article_content clearfix"> id="content_views" class="markdown_views prism-atom-one-dark">

​

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

一、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);
    // 弹窗失败的错误处理
  }
});
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
class="hide-preCode-box">
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

二、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);
  }
});
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

三、 wx.showLoading

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

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

// 显示加载提示框
wx.showLoading({
  title: '数据加载中',
  mask: true
});

// 假设进行一些异步操作
setTimeout(() => {
  // 隐藏加载提示框
  wx.hideLoading();
  // 如果需要，可以执行其他操作
}, 2000);
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">

四、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
});
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
class="hide-preCode-box">

总结

总而言之，这四个能处理很少一部分弹窗效果 个人感觉，因为支持的方法太少了，前几天想找个支持照片跟文字的，尝试好久都不行，

>>
注：本文转载自blog.csdn.net的少年负剑去的文章"https://blog.csdn.net/weixin_73378557/article/details/141233626"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！