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

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

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

总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/51906.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

密码学之RSA算法

文章目录 1. RSA算法介绍1.2 算法历史与发展1.3 算法应用场景 2. RSA密钥生成2.1 选择素数2.2 计算公钥和私钥2.3 密钥长度与安全性 3 算法原理3.1 加密原理3.2 加密方法3.3 加密示例3.4 代码实现 4. 总结 1. RSA算法介绍 1.2 算法历史与发展 RSA算法由Ron Rivest、Adi Shami…

Qt 0814作业

一、思维导图 二、登录窗口界面 自由发挥登录窗口的应用场景,实现一个登录窗口界面 要求:每行代码都有注释 【需要用到的图片或者动图,自己去网上找】 #include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(par…

Java-文件下载(后端response直接下载文件还是后端将文件流返回给前端,由前端负责下载)

Java 后端处理文件下载时,有两种常见的方法:一种是后端直接下载文件,另一种是后端将文件 流返回给前端,由前端负责下载。这两种方法各有优缺点,适用于不同的场景。 1. 后端直接下载 在这种情况下,后端会直接处理文件的下载逻辑,通常涉及到设置HTTP响应头,将文件内容…

【OCR 学习笔记】二值化——全局阈值方法

二值化——全局阈值方法 固定阈值方法Otsu算法在OpenCV中的实现固定阈值Otsu算法 图像二值化(Image Binarization)是指将像素点的灰度值设为0或255,使图像呈现明显的黑白效果。二值化一方面减少了数据维度,另一方面通过排除原图中…

微服务架构的介绍

系统架构的演变 随着互联⽹的发展,⽹站应⽤的规模不断扩⼤,常规的应⽤架构已⽆法应对,分布式服务架构以及微服务架构势在必⾏,必需⼀个治理系统确保架构有条不紊的演进。 单体应用架构 Web应⽤程序发展的早期,⼤部分…

C++入门——“继承”

一、引入 面相对象的计算机语言有三大特性:“封装”、“继承”、“多态”。今天来讲解一下C的一大重要特性——继承。 通俗理解来讲,继承就和现实生活一样,子辈继承父辈的一些特性,C中的继承也可以这样理解。它允许我们在保持原有…

计算机毕业设计选什么题目好?springboot 基于Java的学院教学工作量统计系统

✍✍计算机毕业编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java、…

day31 贪心算法-mergeIntervals+monotoneIncreasingDigits+binaryTreeCameras

### 8.16 56. Merge Intervals Given an array of intervals where intervals[i] [starti, endi], merge all overlapping intervals, and return an array of the non-overlapping intervals that cover all the intervals in the input. 56. 合并区间 本题也是重叠区间问题…

vue使用高德获取当前地区天气

1、收件箱 | 高德控制台 (amap.com) 首先打开高德开放平台注册一下 2、创建一个应用获取到key后面获取天气的时候 请求接口的时候会用到key 2.1.1 创建应用的时候注意类型选成天气 2.1.2 创建完成之后就点添加key 然后选择web服务就行 3、可以调取天气接口 天气查询-基础 API…

DISCUZ论坛中 “阅读权限10“这几个字的修改教程以及后台目录路径修改后的管理路径

第一篇:修改“阅读权限10”这几个字 首先找到目录: source\language\lang_message.php 找到这个文件 查找: thread_nopermission 首发地址:玖毅论坛 第二篇:后台管理路径 看到好多人在网上问discuz管理路径怎么…

围观|微信小程序开发数据绑定最佳实践?

在微信小程序开发中进行数据绑定时,遵循一些最佳实践可以帮助你编写更高效、可维护的代码。以下是一些数据绑定的最佳实践: 1. 保持数据简洁 尽量保持 data 对象中的数据简洁明了,避免嵌套过深的数据结构。这样可以减少数据更新的复杂性,提高代码的可读性。 Page({data:…

SocketIO的常见问题

1 常见问题 连接超时:当客户端尝试连接到服务器时,如果连接超出了设定的时间限制,就会发生连接超时异常。这可能是由于网络延迟、服务器负载过高或防火墙限制等原因引起的。读/写超时:在Socket通信中,当读/写操作超过…

【鸿蒙学习】HarmonyOS应用开发者基础 - 构建更加丰富的页面(一)

学完时间:2024年8月14日 一、前言叨叨 学习HarmonyOS的第六课,人数又成功的降了500名左右,到了3575人了。 二、ArkWeb 1、概念介绍 ArkWeb是用于应用程序中显示Web页面内容的Web组件,为开发者提供页面加载、页面交互、页面调…

文献检索中JCR与SCIE的区别

一、SCIE Science Citation Index-Expanded(SCI-E,科学引文索引),属于Web of Science中一个子库,是全球著名的科学引文索引数据库,收录了全球自然科学、工程技术、临床医学等领域内170多个学科的9500多种国际性、高影响…

volta引发的血案

什么是volta volta用于做项目级别的node版本控制,当手头上的项目有多个时,且node版本可能还不一样,我们需要不断切换node版本。使用volta可以很好的解决这个问题。只需要安装volta,然后在下面的package.json中配置好node版本即可…

Oracle 用户-表空间-表之间关系常用SQL

问题: 当某一个表数据量特别大,突然插入数据一直失败,可能是表空间不足,需要查看表的使用率 用户-表空间-表之间关系:用户可以有多个表空间,表空间可以有多个表,表只能拥有一个表空间和用户 1.…

跨国企业是否适合使用专线连接国际互联网?

在跨国企业开展国际通信时,需要稳定高效的网络连接来保障业务运作。虽然传统的互联网连接方式较为普遍,但由于带宽有限、网络延迟等问题,跨国企业往往会遇到网速缓慢、连接不稳定等挑战。因此,专线连接逐渐成为跨国企业的一个可行…

如何将MySQL迁移到TiDB,完成无缝业务切换?

当 MySQL 数据库的单表数据量达到了亿级,会发生什么? 这个现象表示公司的业务上了一个台阶,随着数据量的增加,公司规模也进一步扩大了,是非常喜人的一个改变 ,然而随之而来的其他变化,就没那么…

stable-diffusion-xl-refiner-1.0

1.前言 这是一个基于Latent Diffusion的生成模型。它的主要功能是对通过SDXL 1.0 base模型生成的初始图像进行进一步的细化和去噪处理,以提升图像的质量和细节表现。这里的“refiner”模型是专门设计用来在最后的降噪步骤中改进图像的。 2.与SDXL 1.0 base模型的区别…

javascript之三元运算符

javascript三元运算符和c语言的很相似&#xff0c;语法格式都是 条件?代码1:代码2 等同于 if(条件) { 代码1 } else { 代码2 } 假如要制作一个输入两个数据&#xff0c;比较大小并输出最大数的网页 代码如下 <!DOCTYPE html> <html><head><…