微信小程序几种常用弹窗提示方法

article/2025/9/21 9:57:46

1.提示文字

可以设置显示时间(仅提示时使用)duration设置时间

不显示icon,此时 title文字最多可显示两行

也可以显示icon,显示icon文字最多显示 7 个汉字长度

icon常用的有:success、error、loading

wx.showToast({title: '成功',icon: 'success',duration: 2000
})

示例图片

2.模态对话框

 可以确认和关闭

wx.showModal({title: '提示',content: '确定要取消订单吗?',success (res) {if (res.confirm) {//这里是点击确认执行事件} else if (res.cancel) {//这里是点击取消执行事件}}
})

如图

 

3.loading 提示框

显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 

注意:wx.showLoading 和 wx.showToast 同时只能显示一个

wx.showLoading({title: '加载中',
})setTimeout(function () {wx.hideLoading()
}, 2000)

如图:

4.行选择弹窗

itemList数组所对应的选项 

wx.showActionSheet({itemList:['A', 'B', 'C'], success: (res) => {switch(res.tapIndex) {case 0:console.log('a')break;case 1:console.log('b')break;	case 2:console.log('c')break;}},fail (res) {console.log('取消')}
})

如图

 

 

微信小程序文档地址:wx.showToast(Object object) | 微信开放文档


http://chatgpt.dhexx.cn/article/Tg3AGaGV.shtml

相关文章

微信小程序展示弹窗的方式

微信小程序中展示弹窗有四种方式&#xff1a;wx.showToast、wx.showModal、wx.showLoading、wx.showActionSheet 具体参数可参照微信开发文档 1. wx.showToast <!-- index.wxml --> <!-- wx.showToast(消息提示框) --> <button bindtap"handleShowToast&…

微信小程序之弹出框

微信小程序中toast消息提示框只有两种显示的效果&#xff0c;就是成功和加载&#xff0c;使用wx.showToast(OBJECT)。 看下有关参数说明&#xff1a; 代码很简单&#xff1a; wx.showToast({title: 成功,icon: succes,duration: 1000,mask:true}) mask属性好像并没有起作用。有…

微信小程序弹窗

微信小程序自定义底部、顶部、中间、左边、右边弹窗 简单的微信小程序弹窗功能&#xff0c;具体实现过程&#xff0c;请浏览代码。 顶部弹出窗图例&#xff1a; 中间弹出窗图例&#xff1a; 底部弹出窗图例&#xff1a; 左边弹出窗图例&#xff1a; 右边弹出窗图例&#x…

微信小程序弹窗提示怎么写

第一种&#xff1a;弹出提示框&#xff0c;可以选择确定或者取消。 代码&#xff1a; wx.showModal({ title: 提示, content: 这是一个模态弹窗, success: function (res) { if (res.confirm) {//这里是点击了确定以后 console.log(用户点击…

微信小程序的弹窗提示

第一种&#xff1a;弹出提示框&#xff0c;用户可以选择确定或者取消&#xff0c;且都带有回调。 wx.showModal({title: 提示,content: 这是一个模态弹窗,success: function (res) {if (res.confirm) { //这里是点击了确定以后console.log(用户点击确定)} else { //这里是点击了…

CSS中水平居中、垂直居中和水平同时垂直居中

1.水平居中 2.垂直居中 3.水平并垂直居中 flex布局用到父元素上&#xff0c;绝对定位用到子元素上。

HTML/CSS:图片居中(水平居中和垂直居中)

css图片居中分css图片水平居中和垂直居中两种情况&#xff0c;有时候还需要图片同时水平垂直居中。 css图片水平居中 1.利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下&#xff1a; <div style"text-…

前端|如何让一个元素水平居中/垂直居中?

不知道你们是否有这样的体验&#xff0c;水平居中在前端中经常使用&#xff0c;但是&#xff01;&#xff01;&#xff01;每次一用就各种不起作用。各种justify-content,align-item,text-align,margin&#xff0c;经过种种尝试之后&#xff0c;终于能够居中了&#xff0c;但下…

微信小程序元素水平居中或垂直居中

.wxml<view class"father"> <view class"children1">子元素1</view> <view class"children2">子元素2</view> <view class"children3">子元素3</view> </view>.wxss.father{display:…

【CSS】元素居中总结-水平居中、垂直居中、水平垂直居中

【CSS】元素居中 一、 水平居中1.行内元素水平居中&#xff08;1&#xff09;text-align 2.块级元素水平居中2.1 margin&#xff08;1&#xff09;margin 2.2布局&#xff08;1&#xff09;flex justify-content&#xff08;推荐&#xff09;&#xff08;2&#xff09; flexmar…

关于照片(img)的水平居中和垂直居中

本文主要是讲述照片&#xff08;img&#xff09;的水平居中和垂直居中&#xff0c;但是其他元素的水平居中和垂直居中也可借鉴此文。 水平居中&#xff1a; 1.将img元素设置成块级元素 img {display: block;margin: 0 auto;} 2.flex布局 .box1 {width: 100px;height: 100p…

margin 实现水平居中,垂直居中

首先了解下&#xff0c;margin的auto属性的作用是用来分配剩余空间&#xff0c;所以对于有剩余空间的元素才有效哦&#xff08;块及元素&#xff09;。比如图片设置margin: 0 auto是无效的&#xff0c;因为图片是内联元素&#xff0c;不是占一整行&#xff0c;没有剩余空间。 1…

让div在屏幕中居中(水平居中+垂直居中)的几种方法

这里是修真院前端小课堂&#xff0c;本篇分析的主题是 【让div在屏幕中居中&#xff08;水平居中垂直居中&#xff09;的几种方法】 水平居中方法: 1.inline&#xff0c;inline-block元素的水平居中&#xff0c;在父级块级元素中设置text-align:center; 2.确定宽度的块级元素…

CSS布局对齐方式--水平居中、垂直居中、水平垂直居中

前言&#xff1a;在网页布局中&#xff0c;经常遇到需要使元素居中对齐的时候&#xff0c;居中对齐的方式有&#xff1a;水平居中、垂直居中和水平垂直居中。这次&#xff0c;借此回顾总结一下&#xff0c;并在此记录下相关内容。 一、水平居中&#xff1a; &#xff08;1&…

CSS水平居中+垂直居中+水平/垂直居中的方法总结

目录 水平居中 行内元素 块级元素 方案一&#xff1a;(分宽度定不定两种情况) 方案二&#xff1a;使用定位属性 方案三&#xff1a;使用flexbox布局实现&#xff08;宽度定不定都可以&#xff09; 垂直居中 单行的行内元素 多行的行内元素 块级元素 水平垂直居中 已…

HTML/CSS常见的几种水平居中、垂直居中、水平垂直居中方法

HTML/CSS常见的几种水平居中、垂直居中、水平居中方式 一、水平居中 1.第一种方式 在css中使用text-align和display属性 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; ch…

CSS居中——水平居中、垂直居中方法

水平居中 1、行内或类行内元素&#xff08;如文本、链接&#xff09; 在块级父元素中用CSS样式实现行内元素水平居中&#xff0c;只需要设置&#xff1a;text-align: center; 这种方法可以让 inline / inline-block / inline-table / flex 等类型的元素实现居中。 效果图&a…

CSS实现水平居中与垂直居中

CSS实现水平居中与垂直居中 一、水平居中1. 必备知识1.1 text-align 属性1.2 display 属性1.3 margin 属性1.4 position 属性1.5 transform 属性 2. 实现方式2.1 内联元素居中2.2 块级元素居中2.2.1 margin: 0 auto2.2.2 text-align display2.2.3 position transform 二、垂直…

CSS基础知识(五):水平居中和垂直居中

文章目录 一、居中二、水平居中1. 行内元素水平居中2. 块级元素水平居中2.1 使用margin: 0 auto2.2 使用position2.3 使用flex 三、垂直居中1. 行内元素1.1 单行行内元素垂直居中1.2 多行行内元素垂直居中 2. 块级元素2.1 使用position2.2 使用flex 一、居中 行内元素&#xff…

字符串匹配算法之KMP算法(图例详解)

字符串匹配算法之KMP算法&#xff08;图例详解&#xff09; 1.字符串匹配算法及暴力算法1.1 简介1.2 示例题目 2.KMP算法&#xff08;Knuth-Morris-Pratt algorith&#xff09;2.1 朴素算法的缺点2.2 KMP算法2.2.1 KMP算法中的前缀算法2.2.1.1 前缀函数pi的定义2.2.1.2 前缀函数…