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

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

一、wx.showModal

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

参数说明:

  • 标题(title):弹窗的标题,可以自定义。
  • 内容(content):弹窗显示的具体内容,可以是文本或 HTML 格式。
  • 显示取消按钮(showCancel) :是否显示取消按钮,默认为 true
  • 取消按钮文案(cancelText):自定义取消按钮的文案,默认为"取消"。
  • 取消按钮颜色(cancelColor):自定义取消按钮的文字颜色。
  • 确定按钮文案(confirmText):自定义确定按钮的文案,默认为"确定"。
  • 确定按钮颜色(confirmColor):自定义确定按钮的文字颜色。

代码演示

javascript 复制代码
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:接口调用结束的回调函数(调用成功、失败都会执行)。

代码演示

javascript 复制代码
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。

代码演示:

javascript 复制代码
// 显示加载提示框
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:函数类型,接口调用结束的回调函数(调用成功、失败都会执行)。

代码演示:

javascript 复制代码
// 显示成功的提示
wx.showToast({
  title: '操作成功',
  icon: 'success'
});

// 显示加载中的提示
wx.showToast({
  title: '加载中',
  icon: 'loading'
});

// 自定义显示时间
wx.showToast({
  title: '自定义时长',
  duration: 3000
});

总结

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

相关推荐
海阔天空668821 小时前
微信小程序添加水印功能
微信小程序·canvas·水印
流***陌1 天前
淘宝一番赏抽赏小程序:开启趣味抽赏新体验
小程序
说私域1 天前
开源链动2+1模式AI智能名片S2B2C商城小程序在竞争激烈的中低端面膜服装行业中的应用与策略
大数据·人工智能·小程序
_AaronWong1 天前
一键搞定UniApp WiFi连接!这个Vue 3 Hook让你少走弯路
前端·微信小程序·uni-app
陈陈小白1 天前
小程序如何接入火山引擎埋点数据
小程序·火山引擎
星光一影1 天前
Java版小区物业管理系统/业主端/物业端/管理端/支持公众号、小程序、app
java·大数据·小程序
2501_915909061 天前
tcpdump 抓包数据分析实战,命令、过滤、常见故障定位与真机补充流程
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
赵庆明老师1 天前
Uniapp微信小程序开发:微信小程序支付功能后台代码
微信小程序·小程序·uni-app
00后程序员张2 天前
tcpdump 抓包分析,命令、过滤技巧、常见症状定位与移动真机补充方案
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
会点法律的程序员2 天前
小程序 地理位置授权怎么搞
前端·小程序·uni-app