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

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

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

总结

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

相关推荐
Bruce_Json7 分钟前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
来碗盐焗星球2 小时前
记一次微信小程序AI开发的血泪史
前端·微信小程序
说私域4 小时前
淘宝直播与开源链动2+1模式AI智能名片S2B2C商城小程序的融合发展研究
人工智能·小程序·开源
说私域7 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源
The_era_achievs_hero14 小时前
微信小程序71~80
微信小程序·小程序
dssxyz15 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
!win !15 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
澄江静如练_19 小时前
微信小程序发体验版
微信小程序·小程序
流口水的兔子1 天前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记1 天前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app